JavaScript模板字符串用法實(shí)例
1. 什么是模板字符串 ?
模板字符串:是允許嵌入表達(dá)式的字符串(可以使用多行字符串和字符串插值功能)
它的寫法,以反引號(hào) ` 開(kāi)頭,以反引號(hào) ` 結(jié)尾
let str = `這是一個(gè)模板字符串`;
2. 模板字符串的用法
它與一般字符串不同,會(huì)保留空格,換行符和縮進(jìn)
const str = `第一 行 第二行 第三行` console.log(str);
它還可以進(jìn)行字符串插值,即將其它值插入到字符串中
字符串插值的寫法:
一個(gè)美元符號(hào),花括號(hào) ${val}
,val
寫想插入的值
let name = 'XiXiHaHa', age = 18; let sayHello = `Hello! My name is ${name}. My age is ${age}.` console.log(sayHello);
3. 模板字符串標(biāo)簽函數(shù)
通過(guò)標(biāo)簽函數(shù)可以自定義插值行為
(標(biāo)簽函數(shù)的第一個(gè)參數(shù)包含一個(gè)字符串值的數(shù)組。其余的參數(shù)與表達(dá)式相關(guān))
例如:
let a = 1, b = 2; //strings:字符串?dāng)?shù)組---以${}分分隔符分割得到的數(shù)組 //aVal:模板字符串中第一個(gè)${}的值 //bVal:模板字符串中第二個(gè)${}的值 //abSum:模板字符串中第三個(gè)${}的值 function addSum(strings, aVal, bVal, abSum) { console.log(strings); console.log(aVal); console.log(bVal); console.log(abSum); } let abSum = addSum`${a} + $ = ${a + b}`;
讓我們通過(guò)一個(gè)例子來(lái)理解一下它的應(yīng)用:
let a = 1, b = 2, c = 3; // 由于參數(shù)不確定,可以使用剩余參數(shù)在這里 function addSum(strings, ...val) { return strings[0] + val.map((e, i) => `${e}${strings[i + 1]}`) .join(''); } let abSum = addSum`${a} + $ = ${a + b}`; console.log(abSum); let abcSum = addSum`${a} + $ + ${c} = ${a + b + c}`; console.log(abcSum);
補(bǔ)充:JS模板字符串拼接
$oss是main.js中定義好的,主要用于圖片URL的拼接
Vue.prototype.$oss = { basicAddress: 'http://oss.bailimeijia.com' }
1、在HTML中使用模板字符串拼接
<img class="img-circle" :src="$oss.basicAddress + '/' + businessorgData.idCardUrl1" style="width: 100px; height: 100px" />
2、在js中使用模板字符串拼接
data() { return { fileList: [{ url:`${this.$oss.basicAddress}/FrIkEw2UlgTxcmNKjt7FxywVT-W4`, }] } },
3、其他模板字符串的使用
$('#list').html(` <div id=sm_shop_tp> <p>商家名字:<span>XXX</span></p> <p>商家地址:<span>XXX</span></p> <p>商家聯(lián)系方式:<span>XXX</span></p> </div> `);
如果使用模板字符串表示多行字符串,則所有的空格、縮進(jìn)和換行都會(huì)被保留在輸出中。
如果想把行首和行尾的換行、空格等去掉,則使用trim方法即可。
$('#list').html(` <div id=sm_shop_tp> <p>商家名字:<span>XXX</span></p> <p>商家地址:<span>XXX</span></p> <p>商家聯(lián)系方式:<span>XXX</span></p> </div> `.trim());
總結(jié)
到此這篇關(guān)于JavaScript模板字符串用法的文章就介紹到這了,更多相關(guān)JS模板字符串內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
靜態(tài)頁(yè)面下用javascript操作ACCESS數(shù)據(jù)庫(kù)(讀增改刪)的代碼
[紅色]靜態(tài)頁(yè)面下用javascript操作ACCESS數(shù)據(jù)庫(kù)(讀增改刪)的代碼...2007-05-05你可能從未使用過(guò)的11+個(gè)JavaScript特性(小結(jié))
這篇文章主要介紹了你可能從未使用過(guò)的11+個(gè)JavaScript特性(小結(jié)),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01JS實(shí)現(xiàn)合并json對(duì)象的方法
這篇文章主要介紹了JS實(shí)現(xiàn)合并json對(duì)象的方法,涉及javascript遞歸調(diào)用與json格式數(shù)據(jù)遍歷的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10js導(dǎo)出excel文件的簡(jiǎn)潔方法(推薦)
下面小編就為帶來(lái)一篇js導(dǎo)出excel文件的簡(jiǎn)潔方法(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11js實(shí)現(xiàn)鼠標(biāo)滑過(guò)文字鏈接色彩變化的效果
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)滑過(guò)文字鏈接色彩變化的效果,涉及javascript鼠標(biāo)事件及樣式操作的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05微信提示 在瀏覽器打開(kāi) 效果實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了微信提示 在瀏覽器打開(kāi) 效果實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09小程序開(kāi)發(fā)調(diào)用微信支付以及微信回調(diào)地址配置
本文主要介紹了小程序開(kāi)發(fā)調(diào)用微信支付以及微信回調(diào)地址配置,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05微信小程序MUI側(cè)滑導(dǎo)航菜單示例(Popup彈出式,左側(cè)滑動(dòng),右側(cè)不動(dòng))
這篇文章主要介紹了微信小程序MUI側(cè)滑導(dǎo)航菜單,結(jié)合實(shí)例形式分析了微信小程序Popup彈出式,左側(cè)滑動(dòng),右側(cè)不動(dòng)菜單功能相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2019-01-01