使用ES6+ 模版字符串的好处

发布时间：2023-03-24 08:42:37 所属栏目：教程来源：

导读：ES6 对字符串进行了扩展，使之更具有表达力，在 ES5 中字符串的功能是很单一，只能定义变量，不能在字符串中进行逻辑运算，只能使用 + 通过拼接的方式实现。另外，字符串的拼接和换行都需要借助 + 和 \n 才能实现，很

ES6 对字符串进行了扩展，使之更具有表达力，在 ES5 中字符串的功能是很单一，只能定义变量，不能在字符串中进行逻辑运算，只能使用 + 通过拼接的方式实现。另外，字符串的拼接和换行都需要借助 + 和 \n 才能实现，很麻烦更容易出错。这无疑限制了我们对字符串的操作。

下面我们先来看看在 ES5 中字符串都是哪些使用场景，从而更好地对比 ES6 所提供的模版字符串到底有什么好处，解决了那些问题。

我们知道在 ES5 中定义一个字符串时会把字符串放入引号里，使用 ''（单引号）或 ""（双引号）来包裹字符串。而对于多个字符串的拼接则需要使用 +（加号运算符）来实现多个字符串的连接。

var a = 'imooc';
var b = ;
console.log('a的值是:' + a + 'b的值是:' + b);
// a的值是:1b的值是:2
可以看到在 ES5 中字符串的拼接是比较麻烦的，在 ES5 中字符串还有一种拼接场景 —— 多行拼接，需要使用换行符 \n 和 + 组合实现。看下面的例子：

var str = '第一行内容\n' +
'第二行内容\n' +
'第三行内容\n';
console.log(str);
/**
第一行内容
第二行内容
第三行内容
*/
上面的代码拼接了多行文本字符串，可以看出来如果是很多行的话，很容易出错，而在 web 开发的早期没有模版概念的时候，数据，然后组装成 DOM 结构插入到页面中，其中还涉及到传递变量的问题，下面看一个插入 DOM 的示例：

<div id="imooc"></div>
<script type="text/javascript">
let lang = 'ES6';
document.getElementById('imooc').innerHTML = '<h1>网' + lang + ' Wiki</h1>' +
'<p>这里是网Wiki，未经许可不能转载</p>' +
'<div>Wiki主要内容内容</div>';
</script>
上面的代码就是在早期 web 开发中经常使用的场景，可以看出在拼接时稍有不慎就会出现拼接错误，这也造成了问题排查的难度。

ES6 为了解决以上问题提出了模版字符串的概念，那么下面我们看看模版字符串是怎么解决这些问题的。

有了模版字符串后就不需要使用加号了，通过使用 ````（反引号）中直接定义多行字符串和变量的拼接。如果是变量就包裹在 ${} 的大括号中。另外，在模版字符串中还可以使用表达式和使用函数标签的方式来增加字符串复杂的功能，扩展了字符串的功能。下面我们来看一下模版字符串都有哪些使用场景。

在 ES6 中可以使用反引号来声明一个字符变量的值。

let name = `imooc`;
上面例子中我们知道在 ES5 中拼接字符串需要用 + 运算符，但在 ES6 中把字符串写在 ```` 中，如果字符串中有变量可以使用 ${} 把变量放在大括号中。如下实例：

var name = '网';
var lang = 'ES6';
console.log(`这是${name}的${lang}教程！`);
// 这是网的ES6教程！
上面的代码中把变量写在 ${} 的大括号中，在编译的过程会直接替换对应的变量。这种方式很明了地表达了字符串的完整性，更加直观地表达字符串的含义。

使用 ES6 的模版字符串时，不需要添加换行符，反引号里的内容就是最后结果的直观表达，下面我们看一下上面插入 DOM 的例子使用 ES6 是如何写的。

<div id="imooc"></div>
<script type="text/javascript">
let lang = 'ES6';
document.getElementById('imooc').innerHTML = `<h1>网${lang}Wiki</h1>
<p>这里是网Wiki，未经许可不能转载</p>
<div>Wiki主要内容</div>`;
</script>
对上述 DOM 进行插入操作，在有变量的地方把变量直接放入 ${} 大括号中即可。

有时候需要对变量进行计算或是根据添加进行判断得到不同场景下的字符串，ES5 的做法很笨也是只能通过 + 的方式连接，要么是计算好了然后再连接，这无疑都是很麻烦的，下面看一个求和例子：

var a = ;
var b = ;
// ES5
console.log('a + b 的和是: ' + (a + b)); // a + b 的和是: 3
// ES6
console.log(`a + b 的和是: ${a + b}`); // a + b 的和是: 3
var age = ;
console.log(`小明是${age > ? '成年人' : '未成年人'}`)
// 小明是未成年人
在上面例子的目标字符串中，可以在 ${} 占位符中直接书写表达式。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!