Web前端入门第 78 问：JavaScript 比较少见的模版字符串用法

在 ES6 之前，JS 的多行字符串一直是开发难题，在处理多行字符串时，各种各样的方案都有~~

在 JS 中，如果直接这样写多行字符串：

const str1 = '第一行
第二行';

那浏览器转过来就打脸，分分钟报错：

Uncaught SyntaxError: Invalid or unexpected token

ES5 多行字符串

以下多种方式都输出：

公众号：
前端路引

1、使用加号拼接：

在每行字符串后面添加 + ，拼接跨行的字符串。

const str2 = '公众号：' + 
 '前端路引';
console.log(str2);

2、反斜线转义换行

在每行末尾添加 \，可以做到跨行书写字符串。

const str3 = '公众号：\n\
前端路引';
console.log(str3);

3、利用数组保存多行字符串

利用数组的 join 方法，可以实现多个数组元素拼接成字符串。

const str4 = [
 '公众号：',
 '前端路引'
].join('\n');
console.log(str4);

4、使用注释保存多行字符串

此方法有点邪门，很早之前就看到过，也不知道出至哪位大佬~~
注意：注释内容在代码压缩时候可能会被删除。

function multiline(fn) {
 return fn.toString()
 .replace(/^[^\/]+\/\*!?/, '') // 删除函数定义和注释起始符
 .replace(/\*\/[^\/]+$/, ''); // 删除注释结束符
}
const str5 = multiline(function() {
/*公众号：
前端路引
*/
});
console.log(str5);

5、使用 HTML 标签保存多行字符串

使用 type="text/plain" 的 script 标签多行文本内容，再 JS 中获取 textContent 即可得到跨行字符串。
此方法是很多浏览器端的模板引擎做法，包括 Vue 不使用 Vite 打包时都可以这么玩~~

<script id="multiText" type="text/plain">公众号：
前端路引</script>
<script>
 const str6 = document.querySelector('#multiText').textContent;
 console.log(str6);
</script>

ES5 多行字符串在使用方法上，总感觉有一点歪门邪道，直到 ES6 模版字符出现，终于实现了大统一~~

ES6 模版字符

使用反引号两个 （``）包起来的字符串就是模板字符串，模板字符串的各种用法如下：

1、多行字符串

const str7 = `公众号：
前端路引`;
console.log(str7);

2、字符串插值

模板字符串重点不是用来显示多行字符串，而是在字符串中间可以插入变量，再也不需要使用 + 拼接了。