ES6模板字符串和標(biāo)簽?zāi)０宓膽?yīng)用實(shí)例分析
本文實(shí)例講述了ES6模板字符串和標(biāo)簽?zāi)０宓膽?yīng)用。分享給大家供大家參考，具體如下：
ES6 中對(duì)字符串進(jìn)行了擴(kuò)展，而模板字符串就是一個(gè)非常實(shí)用的方式，可以在html中實(shí)現(xiàn)與變量和方法的混編
之前我們手動(dòng)拼接字符串的方式
let hello = 'Hello'; let html = '<div>' + '<span>'+ hello +'</span>' + '</div>'; console.log(html); // <div><span>Hello</span></div>
ES6中使用模板字符串來(lái)優(yōu)化了拼接的方式
let name = 'Joh';
let qq = '56655';
function log() {
return 'Hi there!';
}
let html = `
<div>
<ul>
<li>${ name === 'Joh' ? 'is Joh' : 'not Joh'}</li>
<li>${qq}</li>
<li>${log()}</li>
<ul>
</div>
`
console.log(html);
/*
// 輸出如下html:
<div>
<ul>
<li>is Joh</li>
<li>56655</li>
<li>Hi there!</li>
<ul>
</div>
*/
可以看出模板字符串優(yōu)化了之前拼接字符串的方式，更方便于編程
關(guān)于標(biāo)簽?zāi)０?/strong>
未經(jīng)處理的標(biāo)簽函數(shù)與模板字符串的結(jié)合，導(dǎo)致模板字符串失效
function tag() {
return 'tag';
}
let name = "Joh";
var res = tag`hello ${name}`;
console.log(res); // tag
標(biāo)簽函數(shù)對(duì)模板字符串進(jìn)行處理, 安全編碼的示例：
function safe(strArr) {
let res = '';
console.log(arguments);
for(var i=0, len = strArr.length; i < len; i++) {
res += strArr[i].replace(/</g, '<').replace(/>/g, '>');
if(i < arguments.length -1) {
res += arguments[i + 1];
}
}
return res;
}
let name = 'Joh';
var result = safe`<p>hello ${name}</p>`;
console.log(result); // <p>hello Joh</p>
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
js-utils封裝了常用的工具函數(shù),開(kāi)箱即用,下面這篇文章主要給大家介紹了關(guān)于能夠事半功倍的JS?utils工具函數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
使用SpreadJS快速清除Excel中工作表保護(hù)密碼
這篇文章主要為大家介紹了使用SpreadJS快速清除Excel中工作表保護(hù)密碼方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
如何將一個(gè)String和多個(gè)String值進(jìn)行比較思路分析
開(kāi)發(fā)中我們經(jīng)常需要將一個(gè)String和多個(gè)String值進(jìn)行比較。直覺(jué)反應(yīng)是使用||符號(hào)連接多個(gè)===完成，感興趣的朋友可以了解下哈2013-04-04
Ajax異步文件上傳與NodeJS express服務(wù)端處理
本文主要介紹了Ajax異步文件上傳與NodeJS express服務(wù)端處理的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
這篇文章主要介紹了微信內(nèi)置瀏覽器圖片查看器的代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
JavaScript代碼性能優(yōu)化總結(jié)(推薦)
下面小編就為大家?guī)?lái)一篇JavaScript代碼性能優(yōu)化總結(jié)(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-05-05
用循環(huán)或if語(yǔ)句從json中取數(shù)據(jù)示例
倘若想將id和pid數(shù)據(jù)依次取出，就只能用循環(huán)，若想有選擇性的輸出時(shí)，需要添加if條件2014-08-08
javascript完美實(shí)現(xiàn)給定日期返回上月日期的方法
這篇文章主要介紹了javascript完美實(shí)現(xiàn)給定日期返回上月日期的方法,結(jié)合實(shí)例形式分析了javascript日期時(shí)間的計(jì)算技巧,并給出了格式化日期時(shí)間的操作方法,需要的朋友可以參考下2017-06-06
學(xué)習(xí)JavaScript設(shè)計(jì)模式之模板方法模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的模板方法模式，對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下2016-01-01
前段時(shí)間由于工作關(guān)系，查找了一些JS的chart插件，以下數(shù)據(jù)采集于2010.4.8。2010-06-06