模板字串是ES6中引入了一種新的允許嵌入表達式的字串字面量，是一種增強版的字串，它使用反引號來代替普通字串中的用雙引號和單引號。透過使用模板字面量，可以在字串中同時使用單引號和雙引號。
本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
模板字面量 是允許嵌入表達式的字串字面量，是ES6 中引入了一種新的字串字面量。你可以使用多行字串和字串插值功能。它們在ES2015規範的先前版本中被稱為「模板字串」。
範本字串使用反引號 (` `) 來取代普通字串中的用雙引號和單引號。模板字串可以包含特定語法（${expression}）的佔位符。佔位符中的表達式和周圍的文字會一起傳遞給一個預設函數，該函數負責將所有的部分連接起來，如果一個模板字串由表達式開頭，則該字串稱為帶標籤的模板字串，該表達式通常是一個函數，它會在模板字串處理後被調用，在輸出最終結果前，你都可以透過該函數來對模板字串進行操作處理。在模版字串內使用反引號（`）時，需要在它前面加轉義符（\）。
`\`` === "`" // --> true
模板字串可以當作普通字串使用，也可以用來定義多行字串，或是在字串中嵌入變數。
普通用法如下所示：
// 使用 ` 符号包裹的字符串称为模板字符串 let str = `this is str` console.log(typeof str, str); //string this is str
多行模板字串
#ECMAScript 2015提供的模板字串與普通字串的不同的是模板字串中的空格、縮排、換行都會被保留。
範例程式碼如下所指示：
let str = `this
is str`
console.log(typeof str, str);
/*
string this
is str
*/1、帶有表達式的模板字串
模板字串是支援嵌入表達式的，語法結構如下所示：
`${expression}`範例程式碼如下所示：
let str1 = `this is str1`
let str2 = `this is str2`
// 只需要将表达式写入 ${} 中
let and = `${str1} and ${str2}`
console.log(and); // this is str1 and this is str2帶標籤的模板字串
模板字串的功能，不僅僅是上面這些。它可以緊跟在一個函數名後面，該函數將被呼叫來處理這個模板字串。這被稱為標籤模板 功能（tagged template ）。
let str = 'str'
console.log`this is ${str}`;
// 等同于
console.log(['this is ', ''], str);標籤模板其實不是模板，而是函數呼叫的一種特殊形式。 「標籤」指的就是函數，緊接在後面的模板字串就是它的參數。
原始字串
在標籤函數的第一個參數中，存在一個特殊的屬性raw，可以透過它來存取模板字串的原始字串，而不是經過特殊替換的字元。
範例程式碼如下所示：
/*
原始字符串 应用在带标签的模板字符串中
* 在函数的第一个参数中存在 raw 属性，该属性可以获取字符串的原始字符串。
* 所谓的原始字符串，指的是模板字符串被定义时的内容，而不是处理之后的内容
*/
function tag(string) {
console.log(string.raw[0]);
}
tag `string test line1 \n string test line2` // string test line1 \n string test line2另外，使用String.raw()方法出功能鍵原始字串和預設範本函數和字串連接建立是一樣的。
範例程式碼如下所示：
let str = String.raw `Hi\n${2+3}!`;
// ，Hi 后面的字符不是换行符，\ 和 n 是两个不同的字符
console.log(str); // Hi\n5!判斷是否包含某字串
1、includes()方法
includes ()方法用來判斷字串是否包含在另一個字串中，根據判斷結果傳回true或false。
語法結構如下所示：
str.includes(searchString[, position])
參數說明：
#searchString：要在此字串中搜尋的字串。
position：(可選) 從目前字串的哪個索引位置開始搜尋子字串，預設值為 0。
值得注意的是includes()方法是區分大小寫的。
範例程式碼如下所示：
let str = 'abcdef'; console.log(str.includes('c')); // true console.log(str.includes('d')); // true console.log(str.includes('z')); // false console.log(str.includes('A')); // false
ECMAScript 2015提供的這個includes()方法是區分大小寫的，現在我們自己擴充一個不區分大小寫的，
#範例程式碼如下所示：
String.prototype.MyIncludes = function (searchStr, index = 0) {
// 将需要判断的字符串全部改成小写形式
let str = this.toLowerCase()
// 将传入的字符串改成小写形式
searchStr = searchStr.toLowerCase();
return str.includes(searchStr, index)
}
let str = 'abcdef';
console.log(str.MyIncludes('c')); // true
console.log(str.MyIncludes('d')); // true
console.log(str.MyIncludes('z')); // false
console.log(str.MyIncludes('A')); // true2、startsWith()方法
startsWith()方法用來判斷目前字串是否以另外一個給定的子字串開頭，並根據判斷結果回傳true 或false。
語法結構如下所示：
str.startsWith(searchString[, position])
參數說明：
#searchString：要在此字串中搜尋的字串。
position：(可選) 從目前字串的哪個索引位置開始搜尋子字串，預設值為 0。
值得注意的是startsWith()方法是區分大小寫的。
範例程式碼如下所示：
let str = 'abcdef';
/*
* startsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串开头， 并根据判断结果返回 true 或 false。
* str.startsWith(searchString[, position])
参数说明
searchString: 要在此字符串中搜索的字符串。
position: (可选) 从当前字符串的哪个索引位置开始搜寻子字符串， 默认值为 0。
!值得注意的是startsWith() 方法是区分大小写的。
*/
console.log(str.startsWith('a')); // true
console.log(str.startsWith('c', 2)); // true
console.log(str.startsWith('c')); // flase3、endsWith()方法
endsWith()方法用來判斷目前字串是否是以另外一個給定的子字串「結尾」的，根據判斷結果傳回true 或false。
語法結構如下所示：
str.endsWith(searchString[, position])
參數說明：
#searchString：要在此字串中搜尋的字串。
position：(可選) 從目前字串的哪個索引位置開始搜尋子字串，預設值為0。
值得注意的是endsWith()方法是區分大小寫的。
範例程式碼如下所示:
let str = 'abcdef'; console.log(str.endsWith('f')); // true console.log(str.endsWith('c', 3)); // true console.log(str.endsWith('c')); // flase
以下這兩個方法透過可以自己擴充一個不區分大小寫的。
【相關推薦：javascript學習教學】
以上是javascript模板字串是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
