javascript模板字符串（反引號）

https://www.cnblogs.com/alummox/p/11343269.html

 

模板字面量 是允許嵌入表達式的字符串字面量。

你可以使用多行字符串和字符串插值功能。它們在ES2015規范的先前版本中被稱為“模板字符串”。

語法

`string text`
​
`string text line 1
 string text line 2`
​
`string text ${expression} string text`
​
tag `string text ${expression} string text`

描述

模板字符串使用反引號 () 來代替普通字符串中的用雙引號和單引號。模板字符串可以包含特定語法（${expression}）的占位符。占位符中的表達式和周圍的文本會一起傳遞給一個默認函數，該函數負責將所有的部分連接起來，如果一個模板字符串由表達式開頭，則該字符串被稱為帶標簽的模板字符串，該表達式通常是一個函數，它會在模板字符串處理后被調用，在輸出最終結果前，你都可以通過該函數來對模板字符串進行操作處理。在模版字符串內使用反引號（`）時，需要在它前面加轉義符（\）。

`\`` === "`" // --> true

多行字符串

在新行中插入的任何字符都是模板字符串中的一部分，使用普通字符串，你可以通過以下的方式獲得多行字符串：

console.log('string text line 1\n' +
'string text line 2');
// "string text line 1
// string text line 2"

要獲得同樣效果的多行字符串，只需使用如下代碼：

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

插入表達式

在普通字符串中嵌入表達式，必須使用如下語法：

var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."

現在通過模板字符串，我們可以使用一種更優雅的方式來表示：

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

嵌套模板

在某些時候，嵌套模板是具有可配置字符串的最簡單也是更可讀的方法。 在模板中，只需在模板內的占位符 ${ } 內使用它們，就可以輕松地使用內部反引號。 例如，如果條件 a 是真的，那么返回這個模板化的文字。

一個普通字符串例子：

var classes = 'header'
classes += (false ?
   '' : true ?
     ' icon-expander' : ' icon-collapser');

輸出：header icon-expander

在ES2015中使用模板文字而沒有嵌套：

var classes = `header ${ false ? '' :
(true ? 'icon-expander' : 'icon-collapser') }`;

輸出：header icon-expander

在ES2015的嵌套模板字面量中：

var classes = `header ${ false ? '' :
`icon-${true ? 'icon-expander' : 'icon-collapser'}` }`;

輸出：header icon-icon-expander

帶標簽的模板字符串

更高級的形式的模板字符串是帶標簽的模板字符串。標簽使您可以用函數解析模板字符串。標簽函數的第一個參數包含一個字符串值的數組。其余的參數與表達式相關。最后，你的函數可以返回處理好的的字符串（或者它可以返回完全不同的東西 , 如下個例子所述）。用於該標簽的函數的名稱可以被命名為任何名字。

var person = 'Mike';
var age = 28;
​
function myTag(strings, personExp, ageExp) {
​
  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "
​
  // There is technically a string after
  // the final expression (in our example),
  // but it is empty (""), so disregard.
  // var str2 = strings[2];
​
  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
 } else {
    ageStr = 'youngster';
 }
​
  return str0 + personExp + str1 + ageStr;
​
}
​
var output = myTag`that ${ person } is a ${ age }`;
​
console.log(output);
// that Mike is a youngster

標簽函數並不一定需要返回一個字符串。可以返回其他數據類型，比如數組、json等

原始字符串

在標簽函數的第一個參數中，存在一個特殊的屬性raw ，我們可以通過它來訪問模板字符串的原始字符串，而不經過特殊字符的替換。

function tag(strings) {
  console.log(strings.raw[0]);
}
​
tag`string text line 1 \n string text line 2`;
// logs "string text line 1 \n string text line 2" 

另外，使用String.raw() 方法創建原始字符串和使用默認模板函數和字符串連接創建是一樣的。

var str = String.raw`Hi\n${2+3}!`;
// "Hi\n5!"
​
str.length;
// 6
​
str.split('').join(',');
// "H,i,\,n,5,!"

研究了一下，其實模板字符串中的占位符${expression}相當於分隔符，將模板字符串分割，

function tag(strings) {
console.log(strings.raw[0]);
​
console.log(strings.raw[1]);
​
console.log(strings.raw[2]);
}
​
tag`${document.cookie}`;
//0,1都是空，3是undefined
tag`aaa${document.cookie}`;
//0是aaa,1是空，3是undefined
tag`aaa${document.cookie}bbb`;
//0是aaa,1是bbb，3是undefined
tag`aaa${document.cookie}bbb${document}ccc`;
//0是aaa,1是bbb，3是ccc

從上面例子可以看出占位符${expression}相當於分隔符，將模板字符串分割。

帶標簽的模板字面量及轉義序列

自ES2016起，帶標簽的模版字面量遵守以下轉義序列的規則：

• Unicode字符以"\u"開頭，例如\u00A9

• Unicode碼位用"\u{}"表示，例如\u{2F804}

• 十六進制以"\x"開頭，例如\xA9

• 八進制以""和數字開頭，例如\251

 

注：八進制好像不管用

參考資料

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings