ES6知识点整理模板字符串和标签模板的应用

ES6 中对字符串进行了扩展，而模板字符串就是一个非常实用的方式，可以在html中实现与变量和方法的混编

之前我们手动拼接字符串的方式

let hello = 'Hello';
let html = '<div>' + '<span>'+ hello +'</span>' + '</div>';console.log(html); // <div><span>Hello</span></div>

ES6中使用模板字符串来优化了拼接的方式

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>
*/

可以看出模板字符串优化了之前拼接字符串的方式，更方便于编程

关于标签模板

未经处理的标签函数与模板字符串的结合，导致模板字符串失效

function tag() {return 'tag';
}
let name = "Joh";
var res = tag`hello ${name}`;
console.log(res); // tag

标签函数对模板字符串进行处理, 安全编码的示例：

function safe(strArr) {let res = '';console.log(arguments);for(var i=0, len = strArr.length; i < len; i++) {res += strArr[i].replace(/</g, '&lt;').replace(/>/g, '&gt;');if(i < arguments.length -1) {res += arguments[i + 1];}}return res;
}
let name = 'Joh';
var result = safe`<p>hello ${name}</p>`;
console.log(result); // &ltp&gt;hello Joh&lt/p&gt;

ES6知识点整理模板字符串和标签模板的应用相关推荐

es6模板字符串中标签模板作为参数时产生空元素的问题
当模板字符串作为标签模板使用时,标签函数接受到的参数分别为(arr,-values) arr:模板字符串中所有那些没有变量替换的部分 -values:各个变量替换后的值即 let a = 'Oh!' ...
javascript模板字符串（标签函数）
前面介绍了javascript的模板字符串的基本知识,今天深入学习一下标签函数模板字符串概述这里先简单说一下模板字符串的概念 1.模板字符串,从名字上可以得出其实返回的是字符串,普通使用其实就想引 ...
微信小程序模板字符串的用法---模板字符串
今天在开发的过程中,别人用了ES6的用法,模板字符串的用法 div +"kkkk"+"kkkkk"比如这种的,我们完全可以用模板字符串写成 `${app.AP ...
模板字符串中嵌套模板字符串
模板字符串中有需求循环数据放到其中,原先我用arr.map(item=><li><a>${arr.content}</a></li>) 这样不符合 ...
模板语法-插入文本//模板语法-插入标签//模板语法-双花括号//模板语法-向标签属性中插入数据
模板语法-插入文本 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
ES6知识点整理Promise的应用
The Promise object represents the eventual completion (or failure) of an asynchronous operation, and ...
es6字符串添加html标签,JavaScript_详解JavaScript ES6中的模板字符串，在 ES6 中引入了一种新的字符 - phpStudy...
详解JavaScript ES6中的模板字符串在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是 ...
[译]JavaScript:ES6中的模板字符串简介
原文:http://tc39wiki.calculist.org/es6/template-strings/ ES6中的模板字符串(template string)是一种能在字符串文本中内嵌表达式的字 ...
js模板字符串自定义类名_详解JavaScript ES6中的模板字符串
这篇文章主要介绍了详解JavaScript ES6中的模板字符串,JS的ES6版本带来诸多简洁化方面的重大改进,需要的朋友可以参考下在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用 ...

ES6知识点整理模板字符串和标签模板的应用

之前我们手动拼接字符串的方式

ES6中使用模板字符串来优化了拼接的方式

关于标签模板

ES6知识点整理模板字符串和标签模板的应用相关推荐

最新文章

热门文章