Node.js 中的 ES6 模板/字符串文字
簡介
在本文中，我們將討論 JavaScript 模板文字 .它們也被稱為 模板字符串 在 ES2015 規範之前。
除此之外，我們還將介紹標記模板文字 是以及我們如何將它們與常規模板文字一起使用。
什麼是模板文字？
模板文字 與 JavaScript ES2015 (ES6) 一起引入，以更簡單、更易讀的方式處理字符串。
它允許我們在字符串聲明中嵌入表達式（表達式插值），處理多行字符串並創建“標記模板文字”，這是模板文字的更高級形式。
處理字符串模板的舊方法
在 ES6 之前，使用單引號或雙引號來聲明字符串。考慮以下示例：
let x = 'This is a sample string';
let y = "This is a sample string with a 'quote' in it";
let z = 'This is a sample string with a "double quote" in it';
let a = 'This is another sample with a \'quote\' in it';
let b = "This is yet another sample with a \"double quote\" in it";
// a -> This is another sample with a 'quote' in it
// b -> This is yet another sample with a "double quote" in it
通常，我們默認使用單引號聲明，如果字符串中包含單引號，則使用雙引號聲明。反過來也一樣——我們是為了避免使用 a 中的轉義字符 和 b .
此外，如果我們想連接兩個字符串，加號運算符是最常用的方法：
let firstName = 'Janith';
let lastName = 'Kasun';
let fullName = firstName + ' ' + lastName;
// fullName -> Janith Kasun
如果我們想包含空白（包括製表符和換行符），我們使用換行符（\n ) 和製表符空格字符 (\t ) 來做到這一點。
舊語法不允許在不使用特殊字符（例如換行符）的情況下將文本分成下一行：
let info = 'Name:\tJohn Doe\n'
info = info + 'Age:\t20\n';
info = info + 'City:\tLondon';
console.log(info);
運行此代碼將導致：
Name: John Doe
Age: 20
City: London
但是，正如您在此示例中所看到的，使用特殊字符會降低代碼的可讀性。
ES6 模板文字
單引號的可互換使用（' ) 和雙引號 (" )，以及使用特殊字符和轉義字符在某些情況下會使事情變得有點棘手。讓我們看看如何通過使用模板文字來避免這些問題。
聲明模板文字
JavaScript 模板文字使用反引號字符 (`) 來聲明字符串，而不是單引號或雙引號。例如：
let x = `This is a new template literal`;
您可以在帶有模板文字的字符串聲明中使用引號和雙引號：
let y = `This is a string with a 'single quote'`;
let z = `This is a string with a "double quote"`;
多行字符串和製表符
使用模板文字，我們可以在聲明本身內添加一個新行。我們可以簡單地將代碼分解為下一行，而不是使用換行符：
console.log(`This is the first line
This is the second line`);
此代碼導致：
This is the first line
This is the second line
帶有模板文字的表達式（表達式插值）
如果 Template Literals 的唯一特性是避免濫用單引號和雙引號以及換行符，那麼它們就不會改變遊戲規則。然而，通過包含表達式，構建動態字符串和文本變得非常容易 .
您可以在模板文字中添加表達式，結果字符串將包含表達式的評估值。例如，如果沒有模板文字，我們可能會看到以下內容：
let a = 5;
let b = 10;
console.log('The sum of ' + a + ' and' + b + ' is ' + (a + b));
這將導致：
The sum of 5 and 10 is 15
現在，結果很好。但是，當您擁有的不僅僅是簡單的加法時，必須在幾個地方斷開字符串並添加這樣的值是不可讀的。更不用說，一個拼寫錯誤可能會導致隱式數據類型轉換出現問題，並且整個語句都會變得不正確。
使用模板文字，我們可以簡單地在 ${...} 之後添加表達式 語法，直接進入字符串聲明。當我們運行代碼時，會計算表達式並將它們的值放入：
let a = 5;
let b = 10;
console.log(`The sum of ${a} and ${b} is ${a+b}`);
免費電子書：Git Essentials
查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！
這也導致：
The sum of 5 and 10 is 15
對於相當基本的任務，這是一個更清潔的解決方案。讓我們使用模板文字重寫之前的空白示例：
let info = `Name: John Doe
Age: 20
City: London`;
console.log(info);
然而，很少使用像這樣的靜態信息。讓我們用相同的信息填充一個對象，然後讀取它的值：
const person = {
firstName: 'John',
lastName: 'Doe',
age: 20,
city: 'London'
}
let info = `Name: ${person.firstName} ${person.lastName}
Age: ${person.age}
City: ${person.city}`;
console.log(info);
這也導致：
Name: John Doe
Age: 20
City: London
標記模板文字
標記模板文字通過可自定義的函數提供了模板文字的更高級用法。
考慮以下場景。
讓我們定義一個標記模板函數來確定學生是通過還是失敗：
function exampleTag(personExp, strings, marksExp) {
let resultStr;
if (marksExp >= 50) {
resultStr = 'passed';
} else {
resultStr = 'failed'
}
return `${personExp}${strings[0]}${resultStr}`;
}
這裡，根據傳遞給exampleTag()的參數 函數，我們判斷結果是否設置為passed 或 failed .最終，我們返回一個模板文字。此模板文字包含表示人名、字符串和標記的表達式。
讓我們創建幾個人並將它們傳遞給函數：
let p1 = {
person: 'John',
marks: 45
}
let p2 = {
person: 'Ann',
marks: 67
}
let ex1 = exampleTag`${p1.person} had ${p.marks}`;
let ex2 = exampleTag`${p2.person} had ${p.marks}`;
console.log(ex1);
console.log(ex2);
運行此代碼將導致：
John had failed
Ann had passed
雖然我們這裡只有一個字符串，had ，我們可以很容易地擁有很多。因此，strings 參數是一個數組。您可以引用每個傳遞的字符串，根據它們在傳遞給 exampleTag() 的模板文字中的外觀 功能。
原始字符串
最後說一下raw 創建標記模板文字時的屬性。
此屬性在標記模板的第一個參數上可用。它允許您在不處理轉義字符的情況下獲取原始字符串的值。
考慮以下示例：
function rawTag(strings) {
console.log(strings.raw[0]);
}
rawTag`this is a \t sample text with \ escape characters \n\t`;
這將導致：
this is a \t sample text with \ escape characters \n\t
如您所見，我們可以使用 raw 將轉義字符用作原始文本 帶有標記模板的屬性。
您也可以使用 String.raw() 用於執行此操作的函數是一個內置的 JavaScript 標記模板文字，它允許您在不處理轉義字符的情況下聲明原始字符串。
如果您不需要任何額外的邏輯，您可以簡單地使用它：
let rawString = String.raw`this is a \t sample text with \ escape characters \n\t`
這也導致：
this is a \t sample text with \ escape characters \n\t
結論
在本文中，我們介紹了處理動態字符串、空格和轉義字符的舊方法。然後，我們進入了模板字面量、模板字面量中的表達式以及最後標記的模板字面量。
