javascript模板字符串怎么使用

這篇文章主要講解了“javascript模板字符串怎么使用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“javascript模板字符串怎么使用”吧！

模板字符串是ES6中引入了一種新的允許嵌入表達(dá)式的字符串字面量，是一種增強(qiáng)版的字符串，它使用反引號來代替普通字符串中的用雙引號和單引號。通過使用模板字面量，可以在字符串中同時使用單引號和雙引號。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

模板字面量 是允許嵌入表達(dá)式的字符串字面量，是ES6 中引入了一種新的字符串字面量。你可以使用多行字符串和字符串插值功能。它們在ES2015規(guī)范的先前版本中被稱為“模板字符串”。

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

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

模板字符串可以當(dāng)作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。

普通用法如下所示：

// 使用 ` 符號包裹的字符串稱為模板字符串
let str = `this is str`
console.log(typeof str, str); //string this is str

多行模板字符串

ECMAScript 2015提供的模板字符串與普通字符串的不同的是模板字符串中的空格、縮進(jìn)、換行都會被保留。

示例代碼如下所指示：

let str = `this 
      is str`
console.log(typeof str, str);
/*
  string this 
      is str
*/

1、帶表達(dá)式的模板字符串

模板字符串是支持嵌入表達(dá)式的，語法結(jié)構(gòu)如下所示：

`${expression}`

示例代碼如下所示：

let str1 = `this is str1`
let str2 = `this is str2`
// 只需要將表達(dá)式寫入 ${} 中
let and = `${str1} and ${str2}`
console.log(and); // this is str1 and this is str2

帶標(biāo)簽的模板字符串

模板字符串的功能，不僅僅是上面這些。它可以緊跟在一個函數(shù)名后面，該函數(shù)將被調(diào)用來處理這個模板字符串。這被稱為標(biāo)簽?zāi)０?功能（tagged template ）。

let str = 'str'
console.log`this is ${str}`;
// 等同于
console.log(['this is ', ''], str);

標(biāo)簽?zāi)０迤鋵?shí)不是模板，而是函數(shù)調(diào)用的一種特殊形式。“標(biāo)簽”指的就是函數(shù)，緊跟在后面的模板字符串就是它的參數(shù)。

原始字符串

在標(biāo)簽函數(shù)的第一個參數(shù)中，存在一個特殊的屬性raw，可以通過它來訪問模板字符串的原始字符串，而不是經(jīng)過特殊替換的字符。

示例代碼如下所示：

/*
  原始字符串 應(yīng)用在帶標(biāo)簽的模板字符串中
  * 在函數(shù)的第一個參數(shù)中存在 raw 屬性，該屬性可以獲取字符串的原始字符串。
  * 所謂的原始字符串，指的是模板字符串被定義時的內(nèi)容，而不是處理之后的內(nèi)容
*/
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()方法出功能鍵原始字符串和默認(rèn)模板函數(shù)和字符串連接創(chuàng)建是一樣的。

示例代碼如下所示：

let str = String.raw `Hi\n${2+3}!`;
// ，Hi 后面的字符不是換行符，\ 和 n 是兩個不同的字符
console.log(str); // Hi\n5!

判斷是否包含某字符串

1、includes()方法

includes()方法用于判斷一個字符串是否包含在另一個字符串中，根據(jù)判斷結(jié)果返回true或false。

語法結(jié)構(gòu)如下所示：

str.includes(searchString[, position])

參數(shù)說明：

• searchString：要在此字符串中搜索的字符串。

• position：(可選) 從當(dāng)前字符串的哪個索引位置開始搜尋子字符串，默認(rèn)值為 0。

值得注意的是includes()方法是區(qū)分大小寫的。

示例代碼如下所示：

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()方法是區(qū)分大小寫的，現(xiàn)在我們自己擴(kuò)展一個不區(qū)分大小寫的，

示例代碼如下所示：

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')); // true

2、startsWith()方法

startsWith()方法用來判斷當(dāng)前字符串是否以另外一個給定的子字符串開頭，并根據(jù)判斷結(jié)果返回true 或false。

語法結(jié)構(gòu)如下所示：

str.startsWith(searchString[, position])

參數(shù)說明：

• searchString：要在此字符串中搜索的字符串。

• position：(可選) 從當(dāng)前字符串的哪個索引位置開始搜尋子字符串，默認(rèn)值為 0。

值得注意的是startsWith()方法是區(qū)分大小寫的。

示例代碼如下所示：

let str = 'abcdef';
/*
  * startsWith() 方法用來判斷當(dāng)前字符串是否以另外一個給定的子字符串開頭， 并根據(jù)判斷結(jié)果返回 true 或 false。
  * str.startsWith(searchString[, position])
    參數(shù)說明
      searchString: 要在此字符串中搜索的字符串。 
      position: (可選) 從當(dāng)前字符串的哪個索引位置開始搜尋子字符串， 默認(rèn)值為 0。
  !值得注意的是startsWith() 方法是區(qū)分大小寫的。
*/
console.log(str.startsWith('a')); // true
console.log(str.startsWith('c', 2)); // true
console.log(str.startsWith('c')); // flase

3、endsWith()方法

endsWith()方法用來判斷當(dāng)前字符串是否是以另外一個給定的子字符串“結(jié)尾”的，根據(jù)判斷結(jié)果返回 true 或 false。

語法結(jié)構(gòu)如下所示：

str.endsWith(searchString[, position])

參數(shù)說明：

• searchString：要在此字符串中搜索的字符串。

• position：(可選) 從當(dāng)前字符串的哪個索引位置開始搜尋子字符串，默認(rèn)值為0。

值得注意的是endsWith()方法是區(qū)分大小寫的。

示例代碼如下所示:

let str = 'abcdef';
console.log(str.endsWith('f')); // true
console.log(str.endsWith('c', 3)); // true
console.log(str.endsWith('c')); // flase

以下這兩個方法通過可以自己擴(kuò)展一個不區(qū)分大小寫的。

感謝各位的閱讀，以上就是“javascript模板字符串怎么使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對javascript模板字符串怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！