Web前端入门第 78 问：JavaScript 比较少见的模版字符串用法
<p>在 ES6 之前，JS 的多行字符串一直是开发难题，在处理多行字符串时，各种各样的方案都有~~</p><p>在 JS 中，如果直接这样写多行字符串：</p>
<pre><code class="language-js">const str1 = '第一行
第二行';
</code></pre>
<p>那浏览器转过来就打脸，分分钟报错：</p>
<pre><code class="language-bash">Uncaught SyntaxError: Invalid or unexpected token
</code></pre>
<h2 id="es5-多行字符串">ES5 多行字符串</h2>
<p>以下多种方式都输出：</p>
<pre><code class="language-bash">公众号：
前端路引
</code></pre>
<p>1、使用<code>加号</code>拼接：</p>
<p>在每行字符串后面添加 <code>+</code> ，拼接跨行的字符串。</p>
<pre><code class="language-js">const str2 = '公众号：' +
'前端路引';
console.log(str2);
</code></pre>
<p>2、反斜线转义换行</p>
<p>在每行末尾添加 <code>\</code>，可以做到跨行书写字符串。</p>
<pre><code class="language-js">const str3 = '公众号：\n\
前端路引';
console.log(str3);
</code></pre>
<p>3、利用数组保存多行字符串</p>
<p>利用数组的 <code>join</code> 方法，可以实现多个数组元素拼接成字符串。</p>
<pre><code class="language-js">const str4 = [
'公众号：',
'前端路引'
].join('\n');
console.log(str4);
</code></pre>
<p>4、使用注释保存多行字符串</p>
<p>此方法有点邪门，很早之前就看到过，也不知道出至哪位大佬~~<br>
注意：注释内容在代码压缩时候可能会被删除。</p>
<pre><code class="language-js">function multiline(fn) {
return fn.toString()
.replace(/^[^\/]+\/\*!?/, '') // 删除函数定义和注释起始符
.replace(/\*\/[^\/]+$/, '');// 删除注释结束符
}
const str5 = multiline(function() {
/*公众号：
前端路引
*/
});
console.log(str5);
</code></pre>
<p>5、使用 HTML 标签保存多行字符串</p>
<p>使用 <code>type="text/plain"</code> 的 script 标签多行文本内容，再 JS 中获取 <code>textContent</code> 即可得到跨行字符串。<br>
此方法是很多浏览器端的模板引擎做法，包括 Vue 不使用 Vite 打包时都可以这么玩~~</p>
<pre><code class="language-html"><script id="multiText" type="text/plain">公众号：
前端路引</script>
<script>
const str6 = document.querySelector('#multiText').textContent;
console.log(str6);
</script>
</code></pre>
<hr>
<p>ES5 多行字符串在使用方法上，总感觉有一点歪门邪道，直到 ES6 模版字符出现，终于实现了大统一~~</p>
<h2 id="es6-模版字符">ES6 模版字符</h2>
<p>使用反引号两个 （``）包起来的字符串就是模板字符串，模板字符串的各种用法如下：</p>
<p>1、多行字符串</p>
<pre><code class="language-js">const str7 = `公众号：
前端路引`;
console.log(str7);
</code></pre>
<p>2、字符串插值</p>
<p>模板字符串重点不是用来显示多行字符串，而是在字符串中间可以插入变量，再也不需要使用 <code>+</code> 拼接了。</p>
<pre><code class="language-js">const name = '前端路引';
const str8 = `公众号：
${name}`;
console.log(str8);
// ES5 必须使用 + 拼接
const str9 = '公众号：\n' + name;
console.log(str9);
</code></pre>
<p>模板字符串插值 <code>${}</code> 中，既然可以使用变量，肯定是也能使用 JS 中的各种表达式，包括函数调用等。比如</p>
<pre><code class="language-js">const temp1 = `随机数：${Math.random()}`
const temp2 = `是否大于0.5：${Math.random() > 0.5 ? '是' : '否'}`
</code></pre>
<hr>
<p>模板字符串的骚操作开始，以下用法在开发中不是很常见~~</p>
<p><strong>3、模板标签</strong></p>
<p>此写法第一次见到的时候，一度以为存在语法错误~~</p>
<pre><code class="language-js">function tag(strings, ...values) {
let result = "";
strings.forEach((str, i) => {
result += str;
if (i < values.length) result += `<tag>${values}</tag>`;
});
return result;
}
const name2 = '前端路引';
const age2 = 1
console.log(tag`公众号：${name2}，年龄：${age2}`);
// 输出 公众号：<tag>前端路引</tag>，年龄：<tag>1</tag>
</code></pre>
<p>重点代码：</p>
<pre><code class="language-js">tag`公众号：${name2}，年龄：${age2}`
</code></pre>
<p>说实话，当时是第一次见到 JS 的 function 调用时候不需要使用括号~~</p>
<p><strong>4、原始字符串</strong></p>
<p>JS 中的字符串，如果存在反引号 <code>\</code> ，那么就会被当做转义字符处理，可通过 <code>String.raw</code> 让字符串不要转义。</p>
<p>输出 <code>C:\user\Web3Dev\Documents</code> 这个字符串：</p>
<pre><code class="language-js">// 不使用 raw 方法就必须使用 `\\` 两个反引号
console.log('C:\\user\\web3dev\\Documents');
// 使用 raw 方法
console.log(String.raw`C:\user\web3dev\Documents`);
</code></pre>
<h2 id="写在最后">写在最后</h2>
<p>IE 时代，JS 的字符串拼接性一度当做性能优化课题存在，开发建议永远不要使用 <code>+</code> 去拼接字符，一直都是建议使用数组 <code>join</code> 方法拼接字符串，直到 Chrome 崛起，V8 引擎这个性能怪兽终于让 JS 的字符串性能飙升，开发者也不用再考虑字符串拼接的性能问题了~~</p>
</div>
<div id="MySignature" role="contentinfo">
<p> </p>
<p style="font-size: 18px;font-weight: bold;">文章首发于微信公众号【<span style="color:rgb(255, 71, 87)">前端路引</span>】，欢迎 <span style="color:#4ec259">微信扫一扫</span> 查看更多文章。</p>
<p>
<img style="max-width: 320px;" src="https://images.cnblogs.com/cnblogs_com/linx/2447020/o_250228035031_%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.png"/>
</p>
<p>本文来自博客园，作者：前端路引，转载请注明原文链接：https://www.cnblogs.com/linx/p/18986835</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/linx/p/18986835
頁:
[1]