JS ES新特性 模板字符串
1.模板字符串是什么
模板字符串( Template String )是增強(qiáng)版的字符串，使用反引號(hào)(```)來代替譜通字符串中的用雙引號(hào)和單引號(hào)。它可以當(dāng)作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。
普通用法如下所示：
// 使用 ` 符號(hào)包裹的字符串稱為模板字符串 let str = `this is str` console.log(typeof str, str); //string this is str
2.多行模板字符串
ECMAScript 2015提供的模板字符串與普通字符串的不同的是模板字符串中的空格、縮進(jìn)、換行都會(huì)被保留。
示例代碼如下所指示：
let str = `this
is str`
console.log(typeof str, str);
/*
string this
is str
*/
2.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
3.帶標(biāo)簽的模板字符串
模板字符串的功能，不僅僅是上面這些。它可以緊跟在一個(gè)函數(shù)名后面，該函數(shù)將被調(diào)用來處理這個(gè)模板字符串。這被稱為標(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ù)。
4.原始字符串
在標(biāo)簽函數(shù)的第一個(gè)參數(shù)中，存在一個(gè)特殊的屬性raw，可以通過它來訪問模板字符串的原始字符串，而不是經(jīng)過特殊替換的字符。
示例代碼如下所示：
/*
原始字符串 應(yīng)用在帶標(biāo)簽的模板字符串中
* 在函數(shù)的第一個(gè)參數(shù)中存在 raw 屬性，該屬性可以獲取字符串的原始字符串。
* 所謂的原始字符串，指的是模板字符串被定義時(shí)的內(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 是兩個(gè)不同的字符
console.log(str); // Hi\n5!
5.判斷是否包含某字符串
5.1includes()方法
includes()方法用于判斷一個(gè)字符串是否包含在另一個(gè)字符串中，根據(jù)判斷結(jié)果返回true或false。
語法結(jié)構(gòu)如下所示：
str.includes(searchString[, position])
參數(shù)說明：
searchString：要在此字符串中搜索的字符串。position：(可選) 從當(dāng)前字符串的哪個(gè)索引位置開始搜尋子字符串，默認(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提供的這個(gè)includes()方法是區(qū)分大小寫的，現(xiàn)在我們自己擴(kuò)展一個(gè)不區(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
5.2startsWith()方法
startsWith()方法用來判斷當(dāng)前字符串是否以另外一個(gè)給定的子字符串開頭，并根據(jù)判斷結(jié)果返回true 或false。
語法結(jié)構(gòu)如下所示：
str.startsWith(searchString[, position])
參數(shù)說明：
searchString：要在此字符串中搜索的字符串。position：(可選) 從當(dāng)前字符串的哪個(gè)索引位置開始搜尋子字符串，默認(rèn)值為 0。
值得注意的是startsWith()方法是區(qū)分大小寫的。
示例代碼如下所示：
let str = 'abcdef';
/*
* startsWith() 方法用來判斷當(dāng)前字符串是否以另外一個(gè)給定的子字符串開頭， 并根據(jù)判斷結(jié)果返回 true 或 false。
* str.startsWith(searchString[, position])
參數(shù)說明
searchString: 要在此字符串中搜索的字符串。
position: (可選) 從當(dāng)前字符串的哪個(gè)索引位置開始搜尋子字符串， 默認(rèn)值為 0。
!值得注意的是startsWith() 方法是區(qū)分大小寫的。
*/
console.log(str.startsWith('a')); // true
console.log(str.startsWith('c', 2)); // true
console.log(str.startsWith('c')); // flase
5.3endsWith()方法
endsWith()方法用來判斷當(dāng)前字符串是否是以另外一個(gè)給定的子字符串“結(jié)尾”的，根據(jù)判斷結(jié)果返回 true 或 false。
語法結(jié)構(gòu)如下所示：
str.endsWith(searchString[, position])
參數(shù)說明：
searchString：要在此字符串中搜索的字符串。position：(可選) 從當(dāng)前字符串的哪個(gè)索引位置開始搜尋子字符串，默認(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
以下這兩個(gè)方法通過可以自己擴(kuò)展一個(gè)不區(qū)分大小寫的。
到此這篇關(guān)于JS ES新特性 模板字符串的文章就介紹到這了,更多相關(guān)ES模板字符串內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了微信小程序template模板使用的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這樣的功能，需要的朋友可以參考下2017-10-10
TypeScript實(shí)用技巧?Nominal?Typing名義類型詳解
這篇文章主要為大家介紹了TypeScript實(shí)用技巧?Nominal?Typing名義類型詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
今天小編就為大家分享一篇關(guān)于使用JavaScript破解web的文章，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2018-09-09
微信小程序之滾動(dòng)視圖容器的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序之滾動(dòng)視圖容器的實(shí)現(xiàn)方法的相關(guān)資料,希望通過本文能幫助到大家，讓大家掌握這部分內(nèi)容，需要的朋友可以參考下2017-09-09
這篇文章主要為大家介紹了JS分層架構(gòu)低代碼跨iframe拖拽示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要為大家介紹了前端算法leetcode49-字母異位詞分組解題示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了利用JS創(chuàng)建一個(gè)錄屏功能，創(chuàng)建這個(gè)功能錢我們首先創(chuàng)建一個(gè)HTML文件，包含記錄按鈕和一個(gè)播放標(biāo)簽，下面來看看創(chuàng)建的詳細(xì)過程2021-11-11
實(shí)現(xiàn)基于飛書webhook監(jiān)聽github代碼提交
這篇文章主要為大家介紹了實(shí)現(xiàn)基于飛書webhook監(jiān)聽github代碼提交示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了微信小程序 兩種為對(duì)象屬性賦值的方式詳解的相關(guān)資料,需要的朋友可以參考下2017-02-02
這篇文章主要為大家介紹了JS前端輕量fabric.js系列之畫布初始化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08