前端入門學習筆記（二十七）JavaScript入門（十）反引號，${}，模板字符串（Template string），標籤模板(Tagged template)，

在看別人的js代碼時候，發現有些字符串是``反引號，而不是’'單引號，或者""雙引號。查閱後發現這個叫做模板字符串。

在其它語言中，使用模板和插入值是在字符串裏面輸出變量的一種方式。因此，在ES5，我們可以這樣組合一個字符串：

var name = 'Your name is ' + first + ' ' + last + '.';
var url = 'http://localhost:3000/api/messages/' + id;

在ES6中，我們可以使用新的語法$ {NAME}，並把它放在反引號裏：

var name = `Your name is ${first} ${last}. `;
var url = `http://localhost:3000/api/messages/${id}`;

以下爲我查閱到的模板字符串的相關內容。

1. 模板字符串

// 普通字符串
`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?

上面代碼中，模板字符串都是用反引號表示，如果在模板字符串中需要使用反引號，則前面需要用反斜槓轉義。

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

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

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

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

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

模板字符串中嵌入變量，要將變量名寫在${}之中。大括號內可以放入任意的JavaScript表達式，可以進行運算，以及引入對象屬性。

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"

模板字符串之中還可以調用函數。

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

如果大括號中的值不是字符串，則將按照一般的規則轉換爲字符串。如，若大括號中是一個對象，則將默認調用對象的toString方法，把對象轉換爲字符串。

如果模板字符串中的變量沒有聲明，則會報錯。

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

模板字符串之間還可以進行嵌套。

var tmpl = addrs => `
    <table>
    ${addrs.map(addr => `
        <tr><td>${addr.first}</td></tr>
        <tr><td>${addr.last}</td></tr>
    `).join('')}
    </table>
`;

上面代碼中，模板字符串的變量之中，又嵌入了另一個模板字符串，使用方法如下。

const data = [
    { first: '<Jane>', last: 'Bond' },
    { first: 'Lars', last: '<Croft>' },
];

console.log(tmpl(data));
// <table>
//
//   <tr><td><Jane></td></tr>
//   <tr><td>Bond</td></tr>
//
//   <tr><td>Lars</td></tr>
//   <tr><td><Croft></td></tr>
//
// </table>

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

// 寫法一
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!"

---

2. 標籤模板

模板字符串的功能，不僅是上面那些，它還可以緊跟在一個函數後面，該函數將被調用來處理這個模板字符串，這種稱爲“標籤模板”功能(Tagged template)。

標籤模板函數第一個參數是字符串模板的常量數組，後面的每一個參數爲表達式的計算結果，函數名稱可以任意指定。下面是一個例子：

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)

標籤模板其它是一種特殊的函數調用形式，“標籤”指的就是函數，緊跟在後面的模板字符串就是它的參數。

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

上面代碼中，模板字符串前面有一個標識名tag，它是一個函數。整個表達式的返回值就是tag函數處理模板字符串後的返回值。

函數tag依次會接收到多個參數。

tag函數的第一個參數是一個數組，該數組的成員是模板字符串中那些沒有變量替換的部分，也就是說，變量替換隻發生在數組的第一個成員與第二個成員之間、第二個成員與第三個成員之間，以此類推。

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

tag函數所有參數的實際值如下：

第一個參數： [‘Hello ‘, ’ world’, ”]
第二個參數: 3
第三個參數： 2
也就是說，tag函數實際上是用下面的形式調用：

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

---

3. String對象的raw方法

String.raw方法用來充當模板字符串的處理函數，返回一個除表達式和變量會被替換，其它都保持原樣的字符串。

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

String.raw方法可以作爲處理模板字符串的基本方法，它會將所有變量替換，而且對斜槓進行轉義，方便下一步作爲字符串來使用。