ES6現在：模板字符串

> ES6模板文字：一種現代的JavaScript字符串

的方法

鍵突出顯示：

eS6（Ecmascript 2015）顯著增強了JavaScript，引入了對現代網絡開發至關重要的功能。
• 模板文字，使用Backticks（`）作為定界器，在JavaScript中徹底改變了字符串處理。 它們啟用嵌入式表達式和多行字符串。
• >標籤函數可以預先到模板字面上，從而允許所得字符串的自定義處理（例如，URL編碼）。
ES6雖然在現代瀏覽器中得到廣泛支持，但可以將ES6轉移到ES5的較舊瀏覽器中。 功能檢測確保兼容性。
• （本文是Microsoft Web開發系列的一部分。感謝我們的合作夥伴支持SitePoint。） ES6是JavaScript的當前和未來。 該系列探討了其最有用的功能。 我的編碼樣式始終使用單弦的單語引號，在html字符串構造中提供優勢：

避免逃脫字符可提高可讀性。 雖然HTML靈活，但優先考慮人類可讀代碼是關鍵。 我從過去的經驗中學到了DHTML的複雜性，以欣賞更清潔的解決方案。

表達式替代和增強的可讀性：

>

>我對單引號的偏愛源於我的php背景，它們阻止了可變的替代，從而提高了性能。 JavaScript以前缺乏此功能，需要字符串串聯：

// Single quotes simplify HTML attribute quoting
var buttonText = 'Save'; 

>這變得笨重，串起較長，並且通常導致絨毛錯誤。 JavaScript缺乏本地多行字符串進一步使事情變得複雜。

模板文字：解決方案：> ES6模板文字解決了這些問題。 反向（`）允許表達替代和多行字符串：

>

構造處理任何JavaScript表達式，啟用計算和對象屬性訪問：

var animal = 'cow';
var sound = 'moo';

alert('The animal is ' + animal + ' and its sound is ' + sound); 

多行字符串現在毫不費力：

>標記模板：

模板文字可以用函數“標記”，啟用自定義字符串操縱：

var animal = 'cow';
var sound = 'moo';

alert(`The animal is ${animal} and its sound is ${sound}`);

${}此函數將字符串作為參數接收，允許諸如URL編碼之類的操作。 。

var output = `ten times two is ${10 * 2}`;

>訪問標籤函數中的字符串部分：

>

標籤函數同時接收字符串零件和嵌入式表達式作為單獨的參數：>

var list = `
- Buy Milk
- Be kind to Pandas
- Forget about Dre
`;

屬性提供了原始的字符串部分，包括逃生序列。 >

>瀏覽器兼容性和功能檢測：

>

>大多數現代瀏覽器都支持模板文字，但對於較舊的瀏覽器來說，ES6轉卸（例如，使用Babel）是必需的。 功能檢測確保兼容性：

// Single quotes simplify HTML attribute quoting
var buttonText = 'Save'; 

>進一步的閱讀和資源：（省略了簡短的鏈接，但原始文本包含了指向模板文字的各種文章的鏈接。）

Microsoft Web開發系列：

>（有關Microsoft的Web開發資源（包括工具和學習材料）的詳細信息，包括在原始文本中，但此處省略了。）

>

常見問題：（原始文本包含模板文字上的全面常見問題解答部分，由於長度約束，此處省略了。）

以上是ES6現在：模板字符串的詳細內容。更多資訊請關注PHP中文網其他相關文章！