【ES规范】ES6 模板字符串

最新推荐文章于 2023-08-04 08:00:00 发布

原创最新推荐文章于 2023-08-04 08:00:00 发布 · 1k 阅读

CC 4.0 BY-SA版权

4 篇文章

订阅专栏

本文深入探讨了ES6中模板字符串的使用方法，包括基本语法、变量嵌入、多行字符串处理、函数调用及特殊字符转义等内容，旨在帮助读者掌握更高效、灵活的字符串操作技巧。

var   obj={
        name:"demi",
        age:27
    };

    console.log('我叫:' + obj.name + ', 我的年龄是：' + obj.age);

常用的输出格式是使用大量的引号与加号来拼接。要是变量较多的情况下，这种方式很不方便。

ES6中提供了模板字符串，

样式：使用反引号 ··(Tab上面的那个键），使用${}将变量括起来，（变量如果不声明或报错），这里面也可以不是变量，只是字符串。

console.log(`我叫：${obj.name},我的年龄是：${obj.age}`);

** 变量如果不声明，会报错：

console.log(`变量如果没声明，会报错的:${name()}`);

 console.log(`也可以是单独的字符串呢：${"我就是单纯的字符串"}`);

同时，可以：

1.可以包含换行：反引号内可以有多个换行，缩进，都可以在使用的时候被识别；

/**空格，缩进，都可以被识别输出**/
    console.log(`No matter what you do
                 keep moving forward`);

输出如下：

2. 可以在${}中引入变量，或者包含任意的JS表达式，可以进行运算

var x=88;
    var y=100;
    console.log(`x=${++x},y=${x+y}`);//x=89,y=189

3.**模板字符串可以调用函数

这个功能很强大了。

/**模板字符串可以调用函数**/
  function string() {
      return "Jack likes eats potato"
  }
  console.log(`你想说什么？
               嗯，${string()}`);

输出如下：

如果函数的结果不是字符串，输出的时候会按照一般的规则转换为字符串。

4.如果模板字符串中包含特殊字符，需要转义

console.log(`\`哈哈`);