javascript模板字符串（标签函数）
<p class="md-end-block md-p"><span class="md-plain md-expand">前面介绍了javascript的模板字符串的基本知识，今天深入学习一下标签函数</span></p><h1 class="md-end-block md-heading"><span class="md-plain">模板字符串概述</span></h1>
<p class="md-end-block md-p"><span class="md-plain">这里先简单说一下模板字符串的概念</span></p>
<p class="md-end-block md-p"><span class="md-plain">1、模板字符串，从名字上可以得出其实返回的是字符串，普通使用其实就想引号一样的使用，只是加了一些功能</span></p>
<p class="md-end-block md-p"><span style="text-decoration: underline"><span class="md-plain">注：先这些实验例子都是自浏览器控制台中测试的。</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">当做引号使用，返回字符串</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><span class="cm-string-2">`aaaaa`<br><span><span class="cm-comment">//返回字符串"aaaaa"</span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">插入表达式，其实有点格式化输出的感觉</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><span class="cm-keyword">var <span class="cm-def">a<span class="cm-operator">=<span class="cm-number">123;<br><span><span class="cm-string-2">`aaa${<span class="cm-variable">a<span class="cm-string-2">}aaa`<br><span><span class="cm-comment">//返回字符串"aaa123aaa"</span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">带标签的模板字符串，可以自定义函数处理模板字符串</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><span class="cm-keyword">var <span class="cm-def">person <span class="cm-operator">= <span class="cm-string">'Mike';<br><span><span class="cm-keyword">var <span class="cm-def">age <span class="cm-operator">= <span class="cm-number">28;<br><span><br><span><span class="cm-keyword">function <span class="cm-def">myTag(<span class="cm-def">strings, <span class="cm-def">personExp, <span class="cm-def">ageExp) {<br><span><br><span> <span class="cm-keyword">var <span class="cm-def">str0 <span class="cm-operator">= <span class="cm-variable-2">strings[<span class="cm-number">0]; <span class="cm-comment">// "that "<br><span> <span class="cm-keyword">var <span class="cm-def">str1 <span class="cm-operator">= <span class="cm-variable-2">strings[<span class="cm-number">1]; <span class="cm-comment">// " is a "<br><span><br><span> <span class="cm-comment">// There is technically a string after<br><span> <span class="cm-comment">// the final expression (in our example),<br><span> <span class="cm-comment">// but it is empty (""), so disregard.<br><span> <span class="cm-comment">// var str2 = strings;<br><span><br><span> <span class="cm-keyword">var <span class="cm-def">ageStr;<br><span> <span class="cm-keyword">if (<span class="cm-variable-2">ageExp <span class="cm-operator">> <span class="cm-number">99){<br><span> <span class="cm-variable-2">ageStr <span class="cm-operator">= <span class="cm-string">'centenarian';<br><span>} <span class="cm-keyword">else {<br><span> <span class="cm-variable-2">ageStr <span class="cm-operator">= <span class="cm-string">'youngster';<br><span>}<br><span><br><span> <span class="cm-keyword">return <span class="cm-variable-2">str0 <span class="cm-operator">+ <span class="cm-variable-2">personExp <span class="cm-operator">+ <span class="cm-variable-2">str1 <span class="cm-operator">+ <span class="cm-variable-2">ageStr;<br><span><br><span>}<br><span><br><span><span class="cm-keyword">var <span class="cm-def">output <span class="cm-operator">= <span class="cm-variable">myTag<span class="cm-string-2">`that ${ <span class="cm-variable">person <span class="cm-string-2">} <span class="cm-string-2">is a ${ <span class="cm-variable">age <span class="cm-string-2">}`;<br><span><br><span><span class="cm-variable">console.<span class="cm-property">log(<span class="cm-variable">output);<br><span><span class="cm-comment">//输出字符串that Mike is a youngster</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">这里需要注意的一点是，使用标签函数时，模板字符串会解析成字符串数组跟各个${}的值，然后传入标签函数中，因为标签函数的入参就是这样的，下面会深入将标签函数的。</span></p>
<h1 class="md-end-block md-heading"><span class="md-plain">标签函数定义</span></h1>
<p class="md-end-block md-p"><span class="md-plain">标签使您可以用函数解析模板字符串。</span></p>
<p class="md-end-block md-p"><span class="md-plain">标签函数的第一个参数包含一个字符串值的数组。其余的参数与表达式相关。最后，你的函数可以返回处理好的的字符串（或者它可以返回完全不同的东西，全看标签函数的处理）。用于该标签的函数的名称可以被命名为任何名字。</span></p>
<p class="md-end-block md-p"><span class="md-plain">下面看一下标签函数的组成</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><span class="cm-keyword">function <span class="cm-def">Tag(<span class="cm-def">strings, <span class="cm-def">personExp，ageExp,<span class="cm-meta">...)<br><span><span class="cm-comment">//strings:字符串数组，这个其实就是以${}分分隔符分割得到的数组<br><span><span class="cm-comment">//personExp：模板字符串中第一个${}的值<br><span><span class="cm-comment">//ageExp：模板字符串中第二个${}的值<br><span><span class="cm-comment">//...：模板字符串中第n个${}的值</span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">我们可以看个例子，console.log可以打印出来</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><span class="cm-variable">console.<span class="cm-property">log <span class="cm-string-2">`aaa${<span class="cm-number">1<span class="cm-string-2">}bbb`<br><span><span class="cm-comment">//['aaa','bbb'] 1<br><span><span class="cm-variable">console.<span class="cm-property">log <span class="cm-string-2">`aaa${<span class="cm-number">1<span class="cm-string-2">}b${<span class="cm-number">2<span class="cm-string-2">}bb`<br><span><span class="cm-comment">//['aaa','b','bb'] 1 2</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1565706079139.png"><img src="https://img2018.cnblogs.com/blog/929455/201908/929455-20190813224655467-993936190.png"></span></p>
<p class="md-end-block md-p"><span class="md-plain">可以很好的看到，使用标签函数时，模板字符串会被分解成各部分，然后传入标签函数中进行处理。</span></p>
<p class="md-end-block md-p"><span class="md-plain">而标签函数怎么处理完全看函数内部是怎么实现的了，上面例子中实现的myTag标签函数就是拼接字符串然后返回，就相当于字符串拼接的功能。</span></p>
<h1 class="md-end-block md-heading"><span class="md-plain">拓展问题--内置函数作标签函数使用</span></h1>
<p class="md-end-block md-p"><span class="md-plain">从上面学习，标签函数是可以自己实现的，除了内置的标签函数，用内置函数是不是也可以作标签函数呢</span></p>
<p class="md-end-block md-p"><span class="md-plain">我们用alert函数试一下</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><span class="cm-variable">alert<span class="cm-string-2">`aa${<span class="cm-number">1<span class="cm-string-2">}bbb`<br><span><span class="cm-comment">//返回字符串"aa,bbb"<br><span><span class="cm-comment">//实际模板字符串分解后的数据是['aa','bbb'] 1</span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">为什么呢，猜想原因有两个</span></p>
<p class="md-end-block md-p"><span class="md-plain">1、alert内置函数的入参可能只有一个，所以只传入了数组</span></p>
<p class="md-end-block md-p"><span class="md-plain">2、alert内置函数的内部处理逻辑是把数组内容拼接，以,分割</span></p>
<p class="md-end-block md-p"><span><strong><span class="md-plain">验证第一个猜想</span></strong></span></p>
<p class="md-end-block md-p"><span class="md-plain">使用另一个函数，上面例子也是用过的console.log，</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><span class="cm-variable">console.<span class="cm-property">log(<span class="cm-variable">obj1 [, <span class="cm-variable">obj2, <span class="cm-meta">..., <span class="cm-variable">objN]);</span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">这个函数入参有很多个</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><span class="cm-variable">console.<span class="cm-property">log <span class="cm-string-2">`aaa${<span class="cm-number">1<span class="cm-string-2">}bbb`<br><span><span class="cm-comment">//['aaa','bbb'] 1<br><span><span class="cm-variable">console.<span class="cm-property">log <span class="cm-string-2">`aaa${<span class="cm-number">1<span class="cm-string-2">}b${<span class="cm-number">2<span class="cm-string-2">}bb`<br><span><span class="cm-comment">//['aaa','b','bb'] 1 2</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">从输出结果来看，这个就把所有参数都传入了</span></p>
<p class="md-end-block md-p"><span><strong><span class="md-plain">验证第二个猜想</span></strong></span></p>
<p class="md-end-block md-p"><span class="md-plain">上面console.log的例子也证明了第二个猜想，跟alert不同，console.log没有做处理，而是将输入直接输出，跟alert不一样</span></p>
<p class="md-end-block md-p"><span><strong><span class="md-plain">结论</span></strong></span></p>
<p class="md-end-block md-p"><span class="md-plain">1、可自定义标签函数</span></p>
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand">2、js内置函数也可作为标签函数，但是需要考虑入参数量，及处理逻辑</span></p><br><br>
来源：https://www.cnblogs.com/alummox/p/11349116.html
頁:
[1]