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

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

1. const str1 = '第一行
2. 第二行';

复制代码

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

1. Uncaught SyntaxError: Invalid or unexpected token

复制代码

ES5 多行字符串

以下多种方式都输出：

1. 公众号：
2. 前端路引

复制代码

1、使用加号拼接：
在每行字符串后面添加 + ，拼接跨行的字符串。

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

复制代码

2、反斜线转义换行
在每行末尾添加 \，可以做到跨行书写字符串。

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

复制代码

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

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

复制代码

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

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

复制代码

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

1. [/code]ES5 多行字符串在使用方法上，总感觉有一点歪门邪道，直到 ES6 模版字符出现，终于实现了大统一~~
2. [size=5]ES6 模版字符[/size]
4. 使用反引号两个 （``）包起来的字符串就是模板字符串，模板字符串的各种用法如下：
5. 1、多行字符串
6. [code]const str7 = `公众号：
7. 前端路引`;console.log(str7);

复制代码

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

1. const name = '前端路引';
2. const str8 = `公众号：
3. ${name}`;
4. console.log(str8);
6. // ES5 必须使用 + 拼接
7. const str9 = '公众号：\n' + name;
8. console.log(str9);

复制代码

模板字符串插值 ${} 中，既然可以使用变量，肯定是也能使用 JS 中的各种表达式，包括函数调用等。比如

1. const temp1 = `随机数：${Math.random()}`
2. const temp2 = `是否大于0.5：${Math.random() > 0.5 ? '是' : '否'}`

复制代码

模板字符串的骚操作开始，以下用法在开发中不是很常见~~
3、模板标签
此写法第一次见到的时候，一度以为存在语法错误~~

1. function tag(strings, ...values) {  let result = "";  strings.forEach((str, i) => {    result += str;    if (i < values.length) result += `${values[i]}`;  });  return result;}const name2 = '前端路引';const age2 = 1console.log(tag`公众号：${name2}，年龄：${age2}`);// 输出    公众号：
2. 前端路引，年龄：1

复制代码

重点代码：

1. tag`公众号：${name2}，年龄：${age2}`

复制代码

说实话，当时是第一次见到 JS 的 function 调用时候不需要使用括号~~
4、原始字符串
JS 中的字符串，如果存在反引号 \ ，那么就会被当做转义字符处理，可通过 String.raw 让字符串不要转义。
输出 C:\user\Web3Dev\Documents 这个字符串：

1. // 不使用 raw 方法就必须使用 `\\` 两个反引号
2. console.log('C:\\user\\web3dev\\Documents');
4. // 使用 raw 方法
5. console.log(String.raw`C:\user\web3dev\Documents`);

复制代码

写在最后

IE 时代，JS 的字符串拼接性一度当做性能优化课题存在，开发建议永远不要使用 + 去拼接字符，一直都是建议使用数组 join 方法拼接字符串，直到 Chrome 崛起，V8 引擎这个性能怪兽终于让 JS 的字符串性能飙升，开发者也不用再考虑字符串拼接的性能问题了~~

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！