今天為大家說(shuō)說(shuō)ES6中的新特性-模板字符串，它為JavaScript提供了簡(jiǎn)單的字符串插值功能，從此以后，你可以通過(guò)一種更加美觀、更加方便的方式向字符串中插值了。

描述：模板字符串是通過(guò)反引號(hào)(``)來(lái)創(chuàng)建字符串的，跟以往的單引號(hào)('')和雙引號(hào)("")的創(chuàng)建方法是一樣的。

const message = 'Hello, World!'; //單引號(hào)
const message = "Hello, World"; //雙引號(hào)
const message = `Hello, World!`; //反引號(hào)

還有不同于其他兩種功能的是，模板字符串中所有的空格、新行、縮進(jìn)，都會(huì)原樣輸出在生成的字符串中。這樣我們?cè)谟米址畡?chuàng)建dom模板的時(shí)候，就方便的多了。

const div = `
        <div class="hello">
            <p>模板字符串</p>
        </div>
    `;

功能：模板字符串支持占位符(${expression})。占位符內(nèi)的表達(dá)式在運(yùn)行時(shí)進(jìn)行計(jì)算，并將結(jié)果插入到字符串中。

其中占位符內(nèi)的表達(dá)式可以包含以下三種內(nèi)容：

1.變量

const myVal = 'abc';
const message = `${myVal}`;

上面的JS被執(zhí)行過(guò)程中，占位符${myVal}被替換成myVal里面的值，所以后面的message輸出的內(nèi)容也就是abc了。

2.表達(dá)式

const n1 = 1;
const n2 = 2;
const message = `n1 + n2 = ${n1 + n2}, n1比n2大？,${n1 > n2 ? '是的' : '不是'}`;

3.函數(shù)

const a1 = 1;
function sum(a, b) {
    return a + b;
}
const result = `計(jì)算兩個(gè)數(shù)的相加: ${sum(a1, 2)}`; 
//=> 計(jì)算兩個(gè)數(shù)的相加：3;

下面來(lái)說(shuō)說(shuō)它內(nèi)置的一些功能。

一、數(shù)據(jù)類型的隱式轉(zhuǎn)換

占位符表達(dá)式結(jié)果都會(huì)被隱式轉(zhuǎn)換為字符串輸出。

例如number類型：

const n = 3.5;
const message = `The number is ${n}`;
message; // => `The number is 3.5`

數(shù)組類型：

const numbers = [1, 2, 3];
const message = `The numbers are ${numbers}`;
message; // => 'The numbers are 1,2,3'

如果占位符包含一個(gè)對(duì)象，按照轉(zhuǎn)換為字符串的規(guī)則，該對(duì)象也被轉(zhuǎn)換為字符串。調(diào)用對(duì)象的方法toString()來(lái)獲取對(duì)象的字符串表示。

數(shù)組轉(zhuǎn)換的原理是：數(shù)組方法join(',')在數(shù)組轉(zhuǎn)換為字符串時(shí)執(zhí)行。因此字符串插值結(jié)果為'The numbers are 1,2,3'。

二、轉(zhuǎn)義占位符

因?yàn)檎嘉环袷?code class="language-text">${expression}在模板文字中具有特殊含義，所以不能在`${someCharacters}`不轉(zhuǎn)義的情況下使用字符序列。

也就是里面引用的內(nèi)容必須是已經(jīng)聲明了的。

const message = `Some weird characters: ${abc}`;
// Throws "ReferenceError: abc is not defined"

如果想把‘${abc}‘當(dāng)做字符串輸出，可以使用轉(zhuǎn)義符(反斜杠\)。

const message = `Some weird characters: \${abc}`;
message; // => 'Some weird characters follow: ${abc}'

也就是說(shuō)如果你需要在模板字符串中引入字符$和{。無(wú)論你要實(shí)現(xiàn)什么樣的目標(biāo)，你都需要用反斜杠轉(zhuǎn)義每一個(gè)字符：`\$`和`\{`。

const message = `Some weird characters: \${abc} \${abc \${`;

message; // => 'Some weird characters: ${abc} ${abc ${'

最后想說(shuō)的是，字符串插值是一個(gè)很棒的功能，因?yàn)樗兄谝院?jiǎn)潔易讀的方式將值插入字符串文字中。并避免笨拙的字符串連接方法。

總結(jié)

以上是生活随笔為你收集整理的JS中的模板字符串的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。