模板字符串(Template String)是增強(qiáng)版的字符串，用反引號(hào)(`)標(biāo)識(shí)，它可以當(dāng)作普通字符串使用，也可以用來(lái)定義多行字符串，或者在字符串中嵌入變量。

用法

用法

// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
// 字符串中嵌入變量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`   // Hello Bob, how are you today?

上面代碼中，模板字符串都是用反引號(hào)表示，如果在模板字符串中需要使用反引號(hào)，則前面需要用反斜杠轉(zhuǎn)義。

var greeting = `\`Yo\` World!`; // `Yo` World!

如果使用模板字符串表示多行字符串，則所有的空格、縮進(jìn)和換行都會(huì)被保留在輸出中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

上面代碼中，所有模板字符串的空格和換行都是被保留的，比如<ul>標(biāo)簽前面會(huì)有一個(gè)換行。如果想把行首和行尾的換行、空格等去掉，則使用trim方法即可。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

模板字符串中嵌入變量，要將變量名寫在${}之中。大括號(hào)內(nèi)可以放入任意的JavaScript表達(dá)式，可以進(jìn)行運(yùn)算，以及引入對(duì)象屬性。

var x = 1, y = 2;
`${x} + ${y} = ${x + y}`;
// "1 + 2 = 3"
`${x} + ${y * 2} = ${x + y * 2}`;
// "1 + 4 = 5"
var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

模板字符串之中還可以調(diào)用函數(shù)。

function func() {
    return 'Hello';
}
`${func()} World`;
// "Hello World"

如果大括號(hào)中的值不是字符串，則將按照一般的規(guī)則轉(zhuǎn)換為字符串。如，若大括號(hào)中是一個(gè)對(duì)象，則將默認(rèn)調(diào)用對(duì)象的toString方法，把對(duì)象轉(zhuǎn)換為字符串。

如果模板字符串中的變量沒有聲明，則會(huì)報(bào)錯(cuò)。

// 變量place沒有聲明
var msg = `Hello, ${place}`;
// ReferenceError: place is not defined

模板字符串之間還可以進(jìn)行嵌套。

var tmpl = addrs => `
    <table>
    ${addrs.map(addr => `
        <tr><td>${addr.first}</td></tr>
        <tr><td>${addr.last}</td></tr>
    `).join('')}
    </table>
`;
tmpl([{first:'a', last: 'b'}]);
// output:
/*"
    <table>
        <tr><td>a</td></tr>
        <tr><td>b</td></tr>
    </table>
"*/

如果需要引用模板字符串本身，在需要時(shí)執(zhí)行，可以像下面這樣寫。

// 寫法一
var str = 'return ' + '`Hello ${name}!`';
var func = new Function('name', str);
func('Amy');    // "Hello Amy!"
// 寫法二
var str = '(name) => `Hello ${name}!`';
var func = eval.call(null, str);
func('Amy');    // "Hello Amy!"

標(biāo)簽?zāi)０?/h3>

模板字符串的功能，不僅是上面那些，它還可以緊跟在一個(gè)函數(shù)后面，該函數(shù)將被調(diào)用來(lái)處理這個(gè)模板字符串，這種稱為“標(biāo)簽?zāi)０?rdquo;功能(Tagged template)。

標(biāo)簽?zāi)０搴瘮?shù)第一個(gè)參數(shù)是字符串模板的常量數(shù)組，后面的每一個(gè)參數(shù)為表達(dá)式的計(jì)算結(jié)果，函數(shù)名稱可以任意指定。下面是一個(gè)例子：

var a = 5, b = 10;
function tag(strings, ...values) {
    console.log(strings[0]);    // "Hello "
    console.log(strings[1]);    // " world"
    console.log(strings[2]);    // ""
    console.log(values[0]);     // 15
    console.log(values[1]);     // 50
    return "Anything";
}
tag`Hello ${a + b} world ${a * b}`;
// Anything

alert`123`
// 等同于
alert(123)

標(biāo)簽?zāi)０迤渌且环N特殊的函數(shù)調(diào)用形式，“標(biāo)簽”指的就是函數(shù)，緊跟在后面的模板字符串就是它的參數(shù)。

var a = 1,
    b = 2;
tag`Helo ${a + b} world ${a * b}`;

上面代碼中，模板字符串前面有一個(gè)標(biāo)識(shí)名tag，它是一個(gè)函數(shù)。整個(gè)表達(dá)式的返回值就是tag函數(shù)處理模板字符串后的返回值。

函數(shù)tag依次會(huì)接收到多個(gè)參數(shù)。

function tag(stringArr, value1, value2) {
    // ...
}
// 等同于
function tag(stringArr, ...values) {
    // ...
}

tag函數(shù)的第一個(gè)參數(shù)是一個(gè)數(shù)組，該數(shù)組的成員是模板字符串中那些沒有變量替換的部分，也就是說(shuō)，變量替換只發(fā)生在數(shù)組的第一個(gè)成員與第二個(gè)成員之間、第二個(gè)成員與第三個(gè)成員之間，以此類推。

tag函數(shù)的其他參數(shù)，都是模板字符串各個(gè)變量被替換的值。本例中，模板字符串含有兩個(gè)變量，因此tag會(huì)接收到value1和value2兩個(gè)參數(shù)。

tag函數(shù)所有參數(shù)的實(shí)際值如下：

• 第一個(gè)參數(shù)： [‘Hello ‘, ’ world’, ”]
• 第二個(gè)參數(shù): 3
• 第三個(gè)參數(shù)： 2

也就是說(shuō)，tag函數(shù)實(shí)際上是用下面的形式調(diào)用：

tag(['Hello ',' world', ''], 3, 2);

String對(duì)象的raw方法

String.raw方法用來(lái)充當(dāng)模板字符串的處理函數(shù)，返回一個(gè)除表達(dá)式和變量會(huì)被替換，其它都保持原樣的字符串。

String.raw的詳細(xì)用法可以參考這篇文章 http://www.dbjr.com.cn/article/250856.htm

String.raw`Hi\n${2+3}!`;
// "Hi\n5!"
String.raw`Hi\u000A!`;
// "Hi\u000A!"
String.rwa`Hi\\n`;
// "Hi\\n"

String.raw方法可以作為處理模板字符串的基本方法，它會(huì)將所有變量替換，而且對(duì)斜杠進(jìn)行轉(zhuǎn)義，方便下一步作為字符串來(lái)使用。

到此這篇關(guān)于javascript ES6 Template String模板字符串使用方法的文章就介紹到這了,更多相關(guān)js Template String內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論