ES6入门到进阶（2）—模板字符串

目录

• 模板字符串介绍
• 用法示例
• 总结

模板字符串介绍：

定义：模板字符串相当于加强版的字符串，用反引号(`) 标识。它可以当作普通普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量或表达式。

用法示例：

语法：

    // 普通字符串
    `In JavaScript '\n' is a line-feed.`
     
    // 多行字符串
    `In JavaScript this is
    not legal.`
     
    // 字符串中嵌入变量
    let name = "Bob", time = "today";
    `Hello ${
       name}, how are you ${
       time}?`   // Hello Bob, how are you today?

如果在模板字符串中需要使用反引号，则前面需要用反斜杠转义。

let hi= `\`hello\` World!`; // `hello` World!

如果使用模板字符串表示多行字符串，则所有的空格、缩进和换行都会被保留在输出中。

let str = `

  
first
  
second

`;

模板字符串中嵌入变量，要将变量名写在${}之中。大括号内可以放入任意的JavaScript表达式，可以进行运算，以及引入对象属性。

let x = 1, y = 2;
 
`${
       x} + ${
       y} = ${
       x + y}`;
// "1 + 2 = 3"
 
`${
       x} + ${
       y * 2} = ${
       x + y * 2}`;
// "1 + 4 = 5"
 
let obj = {
     x: 1, y: 2};
`${
       obj.x + obj.y}`
// "3"

模板字符串之中还可以调用函数。

function func() {
     
    return 'Hello';
}
 
`${
       func()} World`;
// "Hello World"

模板字符串之间还可以进行嵌套。

let temp= attrs=> `
    ${
       attrs.map(attr=> `
        <tr><td>${
       attr.first}
        
    `).join('')}</table>
`;temp([{
     first:'a', last:'b'}]);// output:/*"
    

    
${
       attr.last}
    
 
 
 


 
        
a
        
b
 
    
"*/

总结：

1. 模板字符串中嵌入变量，需要将变量名写在 ${ } 中
2. 所有模板字符串的空格和换行，都是被保留的
3. 模板字符串的大括号内部，就是执行Javascript代码
4. 支持嵌套

文章推荐：
JS中的正则表达式详解
四个问题彻底学会JS中“闭包”