ES6模板字符串 在字符串中拼接变量的利器!
最近在折腾的时候发现ES6中的模板字符串,非常实用~
从下图代码可见,非常方便!
按照以往的方法要拼接字符,那是一个复杂,各种双引号和+号 真的太麻烦了
模板字符串用反引号 ` 标识,它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
这种语法是能够允许嵌入表达式的字符串字面量 模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。
模板字符串可以包含特定语法(${expression})的占位符,占位符中的表达式和周围的文本会一起传递给一个默认函数,该函数负责将所有的部分连接起来。
如果一个模板字符串由表达式开头,则该字符串被称为带标签的模板字符串,该表达式通常是一个函数,它会在模板字符串处理后被调用,在输出最终结果前,你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号(`)时,需要在它前面加转义符(\)。
多行字符串:
//原始 console.log("string text line 1\n\string text line 2"); // "string text line 1 // string text line 2" //模板字符串 console.log(`string text line 1 string text line 2`); // "string text line 1 // string text line 2"
表达式插补:
let a = 5,b = 1; console.log(`a的值为${a}, b的值为${b}, a+b的值为${a+b}`) // 对应的打印出来的结果为:a的值为5, b的值为1, a+b的值为6
带标签的模板字符串:
var a = 5; var b = 10; function tag(strings, ...values) { console.log(strings[0]); // "Hello " console.log(strings[1]); // " world " console.log(values[0]); // 15 console.log(values[1]); // 50 return "Bazinga!"; } console.log(tag `Hello ${ a + b } world ${ a * b}`); // "Bazinga!"
在标签函数的第一个参数中,存在一个特殊的属性raw ,可以通过它来访问模板字符串的原始字符串:
function tag(strings, ...values) { console.log(strings.raw[0]); // "string text line 1 \n string text line 2" } tag `string text line 1 \n string text line 2`;