ES6 Template String 模板字符串
2018-01-03 15:27
441 查看
语法
模板字符串(Template String)是增强版的字符串,用反引号(`)标识,它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
用法
// 普通字符串 `In JavaScript '\n' is a line-feed.` // 多行字符串 `In JavaScript this is not legal.` // 字符串中嵌入变量 var name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?` // Hello Bob, how are you today?1
2
3
4
5
6
7
8
9
10
上面代码中,模板字符串都是用反引号表示,如果在模板字符串中需要使用反引号,则前面需要用反斜杠转义。
var greeting = `\`Yo\` World!`; // `Yo` World!1
如果使用模板字符串表示多行字符串,则所有的空格、缩进和换行都会被保留在输出中。
$('#list').html(` <ul> <li>first</li> <li>second</li> </ul> `);1
2
3
4
5
6
上面代码中,所有模板字符串的空格和换行都是被保留的,比如
<ul>标签前面会有一个换行。如果想把行首和行尾的换行、空格等去掉,则使用trim方法即可。
$('#list').html(` <ul> <li>first</li> <li>second</li> </ul> `.trim());1
2
3
4
5
6
模板字符串中嵌入变量,要将变量名写在
${}之中。大括号内可以放入任意的JavaScript表达式,可以进行运算,以及引入对象属性。
var x = 1, y = 2; `${x} + ${y} = ${x + y}`; // "1 + 2 = 3" `${x} + ${y * 2} = ${x + y * 2}`; // "1 + 4 = 5" var obj = {x: 1, y: 2}; `${obj.x + obj.y}` // "3"1
2
3
4
5
6
7
8
9
10
11
模板字符串之中还可以调用函数。
function func() { return 'Hello'; } `${func()} World`; // "Hello World"1
2
3
4
5
6
如果大括号中的值不是字符串,则将按照一般的规则转换为字符串。如,若大括号中是一个对象,则将默认调用对象的toString方法,把对象转换为字符串。
如果模板字符串中的变量没有声明,则会报错。
// 变量place没有声明 var msg = `Hello, ${place}`; // ReferenceError: place is not defined1
2
3
模板字符串之间还可以进行嵌套。
var tmpl = addrs => ` <table> ${addrs.map(addr => ` <tr><td>${addr.first}</td></tr> <tr><td>${addr.last}</td></tr> `).join('')} </table> `; tmpl([{first:'a', last: 'b'}]); // output: /*" <table> <tr><td>a</td></tr> <tr><td>b</td></tr> </table> "*/1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
如果需要引用模板字符串本身,在需要时执行,可以像下面这样写。
// 写法一 var str = 'return ' + '`Hello ${name}!`'; var func = new Function('name', str); func('Amy'); // "Hello Amy!" // 写法二 var str = '(name) => `Hello ${name}!`'; var func = eval.call(null, str); func('Amy'); // "Hello Amy!"1
2
3
4
5
6
7
8
9
标签模板
模板字符串的功能,不仅是上面那些,它还可以紧跟在一个函数后面,该函数将被调用来处理这个模板字符串,这种称为“标签模板”功能(Tagged template)。标签模板函数第一个参数是字符串模板的常量数组,后面的每一个参数为表达式的计算结果,函数名称可以任意指定。下面是一个例子:
var a = 5, b = 10; function tag(strings, ...values) { console.log(strings[0]); // "Hello " console.log(strings[1]); // " world" console.log(strings[2]); // "" console.log(values[0]); // 15 console.log(values[1]); // 50 return "Anything"; } tag`Hello ${a + b} world ${a * b}`; // Anything1
2
3
4
5
6
7
8
9
10
11
12
13
14
alert`123` // 等同于 alert(123)1
2
3
标签模板其它是一种特殊的函数调用形式,“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。
var a = 1, b = 2; tag`Helo ${a + b} world ${a * b}`;1
2
3
4
上面代码中,模板字符串前面有一个标识名tag,它是一个函数。整个表达式的返回值就是tag函数处理模板字符串后的返回值。
函数tag依次会接收到多个参数。
function tag(stringArr, value1, value2) { // ... } // 等同于 function tag(stringArr, ...values) { // ... }1
2
3
4
5
6
7
8
9
tag函数的第一个参数是一个数组,该数组的成员是模板字符串中那些没有变量替换的部分,也就是说,变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间,以此类推。
tag函数的其他参数,都是模板字符串各个变量被替换的值。本例中,模板字符串含有两个变量,因此tag会接收到value1和value2两个参数。
tag函数所有参数的实际值如下:
第一个参数: [‘Hello ‘, ’ world’, ”]
第二个参数: 3
第三个参数: 2
也就是说,tag函数实际上是用下面的形式调用:
tag(['Hello ',' world', ''], 3, 2);1
String对象的raw方法
String.raw方法用来充当模板字符串的处理函数,返回一个除表达式和变量会被替换,其它都保持原样的字符串。String.raw`Hi\n${2+3}!`; // "Hi\n5!" String.raw`Hi\u000A!`; // "Hi\u000A!" String.rwa`Hi\\n`; // "Hi\\n"1
2
3
4
5
6
7
8
String.raw方法可以作为处理模板字符串的基本方法,它会将所有变量替换,而且对斜杠进行转义,方便下一步作为字符串来使用。
相关文章推荐
- ES6 Template String 模板字符串
- ES6之模板字符串(Template String)
- python 字符串模板用法string.Template
- 3、ES6 === string 模板字符串
- es6新语法系列,查找字符串,模板字符串
- StringTemplate.Net 学习笔记(9):深入了解模板组文件
- ES6模板字符串不识别script标签
- ECMA2015(ES6)简单入门-1-let块-恒量const-解构-字符串模板
- ES6中的模板字符串和新XSS Payload
- ES6-字符串扩展-标签模板
- [C/C++标准库]_[初级]_[使用模板删除字符串前后空格((w)string space)]
- es6 字符串String的扩展
- ES6中的模板字符串和新XSS Payload
- ES6 模板字符串方法
- ES6字符串模板,剩余参数,默认参数功能与用法示例
- 利用ES6中的模板字符串轻松实现多行和字符串值的插入
- 001_017 Python 替换字符串中的子串string.template
- Python的string模块中的Template类字符串模板用法
- IDEA用ES6中的字符串模板报错
- ES6新增了一种模板字符串