JavaScript模板字符串用法實例
1. 什么是模板字符串 ?
模板字符串:是允許嵌入表達式的字符串(可以使用多行字符串和字符串插值功能)
它的寫法,以反引號 ` 開頭,以反引號 ` 結尾
let str = `這是一個模板字符串`;
2. 模板字符串的用法
它與一般字符串不同,會保留空格,換行符和縮進
const str = `第一 行 第二行 第三行` console.log(str);
它還可以進行字符串插值,即將其它值插入到字符串中
字符串插值的寫法:
一個美元符號,花括號 ${val}
,val
寫想插入的值
let name = 'XiXiHaHa', age = 18; let sayHello = `Hello! My name is ${name}. My age is ${age}.` console.log(sayHello);
3. 模板字符串標簽函數(shù)
通過標簽函數(shù)可以自定義插值行為
(標簽函數(shù)的第一個參數(shù)包含一個字符串值的數(shù)組。其余的參數(shù)與表達式相關)
例如:
let a = 1, b = 2; //strings:字符串數(shù)組---以${}分分隔符分割得到的數(shù)組 //aVal:模板字符串中第一個${}的值 //bVal:模板字符串中第二個${}的值 //abSum:模板字符串中第三個${}的值 function addSum(strings, aVal, bVal, abSum) { console.log(strings); console.log(aVal); console.log(bVal); console.log(abSum); } let abSum = addSum`${a} + $ = ${a + b}`;
讓我們通過一個例子來理解一下它的應用:
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);
補充: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> `);
如果使用模板字符串表示多行字符串,則所有的空格、縮進和換行都會被保留在輸出中。
如果想把行首和行尾的換行、空格等去掉,則使用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());
總結
到此這篇關于JavaScript模板字符串用法的文章就介紹到這了,更多相關JS模板字符串內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
靜態(tài)頁面下用javascript操作ACCESS數(shù)據(jù)庫(讀增改刪)的代碼
[紅色]靜態(tài)頁面下用javascript操作ACCESS數(shù)據(jù)庫(讀增改刪)的代碼...2007-05-05小程序開發(fā)調(diào)用微信支付以及微信回調(diào)地址配置
本文主要介紹了小程序開發(fā)調(diào)用微信支付以及微信回調(diào)地址配置,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-05-05微信小程序MUI側(cè)滑導航菜單示例(Popup彈出式,左側(cè)滑動,右側(cè)不動)
這篇文章主要介紹了微信小程序MUI側(cè)滑導航菜單,結合實例形式分析了微信小程序Popup彈出式,左側(cè)滑動,右側(cè)不動菜單功能相關實現(xiàn)技巧與注意事項,需要的朋友可以參考下2019-01-01