JavaScript 中的 String 类型模板字面量定义字符串

待我称王封你为后i 2023-10-08 19:04 25阅读 0赞

ECMAScript 6新增了使用模板字面量定义字符串的能力。与使用单引号或双引号不同，模板字面量保留换行字符，可以跨行定义字符串：

let str1 = '早起的年轻人\n喜欢经常跳步';
     let str2 = `早起的年轻人
     喜欢经常跳步`;
     console.log(str1);
     // 早起的年轻人
     // second line"
     console.log(str2);
     // 早起的年轻人
     // 喜欢经常跳步
     console.log(str1 === str2); // true

比定义HTML模板：

let pageHTML = `
      <div>
        <a href="#">
          <span>早起的年轻人</span>
        </a>
      </div>`;

模板字符中会保持反引号内部的空格，因此在使用时要格外注意。

// 这个模板字面量在换行符之后有25 个空格符
        let str1 = `first line
                                  second line`;
        console.log(str1.length);   // 47
        // 这个模板字面量以一个换行符开头
        let str2 = `
        first line
        second line`;
        console.log(str2[0] === '\n'); // true

支持字符串插值，也就是可以在一个连续定义中插入一个或多个值。

上述所描述的模板字面量是一种特殊的JavaScript句法表达式，只不过求值后得到的是字符串。模板字面量在定义时立即求值并转换为字符串实例，任何插入的变量也会从它们最接近的作用域中取值。

**字符串插值通过在$\{\}中使用一个JavaScript表达式实现：**

所有插入的值都会使用toString()强制转型为字符串，而且任何JavaScript表达式都可以用于插值。嵌套的模板字符串无须转义：

console.log(`Hello, ${
           `World` }! `);   // Hello, World!

将表达式转换为字符串时会调用toString()：

let foo = {
         toString: () => 'World' };
    console.log(`Hello, ${
           foo }! `);

在插值表达式中可以调用函数和方法：

模板字面量也支持定义标签函数（tag function），而通过标签函数可以自定义插值行为。

![在这里插入图片描述][28ea8c40b3254c5f8570e7c4ee09699a.png]  
因为表达式参数的数量是可变的，所以通常应该使用剩余操作符：

![在这里插入图片描述][a259418a18b54514a165ee4701e21bc8.png]  
如果你想把这些字符串和对表达式求值的结果拼接起来作为默认返回的字符串，可以这样做：

[28ea8c40b3254c5f8570e7c4ee09699a.png]: https://img-blog.csdnimg.cn/28ea8c40b3254c5f8570e7c4ee09699a.png
[a259418a18b54514a165ee4701e21bc8.png]: https://img-blog.csdnimg.cn/a259418a18b54514a165ee4701e21bc8.png