ES6新特性模板字符串Template String

前言

在没有模板字符串Template String的时候，我们有的时候赋值一些带有符号的字符串非常麻烦，如果特殊字符比较多，那么就需要做大量的转移，而且让整个代码看起来不那么的流畅，在ES6之后使用模板字符串就避免了这些问题。

传统形势的赋值

Let a="{\n" +
    "  \"Id\": 2171,\n" +
    "  \"Title\": \"ES6新特性模块化Modules\",\n" +
    "  \"Username\": \"瘦死的猪\",\n" +
    "  \"List\": 2,\n" +
    "  \"Times\": \"2022-12-27T15:44:46.593\",\n" +
    "  \"From\": \"奕玖科技\",\n" +
    "  \"Hist\": 0,\n" +
    "  \"Good\": 0\n" +
    "}"

上面我们把一组JSON字符串数据赋值给变量a，这里面就需要做很多的转义。当然有一些IDE有自动转义的功能，但如果没有的话就需要我们手动的取转义。

模板字符串赋值

let a=`{
  "Id": 2171,
  "Title": "ES6新特性模块化Modules",
  "Username": "瘦死的猪",
  "List": 2,
  "Times": "2022-12-27T15:44:46.593",
  "From": "奕玖科技",
  "Hist": 0,
  "Good": 0
}`
console.log(a)

我们看使用模板字符串的话就不需要转义了，变量的值看起来是不是更清晰了？打印后台后没有任何错误

模板字符串语法

`string text` //使用``符号进行赋值

`string text line 1 
 string text line 2`// 允许直接换行

`string text ${expression} string text` //${expression} 可以插入变量/函数等。

tag `string text ${expression} string text` //标签模板字符串

模板字符串使用符号``来进行赋值，里面如果需要插入函数或则变量则通过${expression}来插入。比如我要插入一个变量b那么就${b}这样就行了。模板字符串允许多行输入可以直接回车就行，不需要其他的连接符。模板字符串里的反应好`需要使用转义符。

function tmp(){
  return true
}
let s="字符串"
let j=`开始插入变量s ${s} ，然后我们在插入函数${tmp()} 然后我们直接换行
换行结束了,如果使用反引号\`需要转义符
`
console.log(j)

标签模板字符串

let a = function (p1,...p2) {
  console.log(p1)
  console.log(p2)
}
let name ='tom'
let sex = "男"
a `name:${name},sex:${sex}`

打印如下

可以看到标签模板的第一个参数返回的是由${}分割而成的一个数组，剩下的就一一对应它的值。不过这个确实不太好理解。

原始字符串

在标签函数里第一个参数里有一个.raw[]方法，该方法可以返回原始字符串。如上面的例子函数改变如下

let a = function (p1,...p2) {
  console.log(p1.raw[0]) //打印字符串 name:

}