欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript模板字符串用法實(shí)例

 更新時(shí)間:2022年11月12日 11:59:02   作者:CSPsy  
在ES6之前我們都使用單引號(hào)或者雙引號(hào)來(lái)包裹字符串,當(dāng)我們想要在字符串中加入變量時(shí),不能直接寫在字符串里,而是需要通過(guò)字符串拼接的方式來(lái)往字符串中加入變量,這篇文章主要給大家介紹了關(guān)于JavaScript模板字符串用法的相關(guān)資料,需要的朋友可以參考下

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)文章

最新評(píng)論