字符串模板中怎么写html标签,ES6模板字符串和标签模板的应用实例分析

本文实例讲述了ES6模板字符串和标签模板的应用。分享给大家供大家参考，具体如下：

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

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

let hello = 'Hello';

let html = '

' +

''+ hello +'' +

console.log(html); //

Hello

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

let name = 'Joh';

let qq = '56655';

function log() {

return 'Hi there!';

}

let html = `

${ name === 'Joh' ? 'is Joh' : 'not Joh'}
${qq}
${log()}

console.log(html);

// 输出如下html:

is Joh
56655
Hi there!

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

关于标签模板

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

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, '>');

if(i < arguments.length -1) {

res += arguments[i + 1];

}

return res;

}

let name = 'Joh';

var result = safe`

hello ${name}

console.log(result); // &ltp>hello Joh&lt/p>

希望本文所述对大家JavaScript程序设计有所帮助。

字符串模板中怎么写html标签,ES6模板字符串和标签模板的应用实例分析相关推荐

1、如何进行字符串常量中的字符定位_Java String：字符串常量池，我相信会有很多朋友不很理解这部分...
作为最基础的引用数据类型,Java 设计者为 String 提供了字符串常量池以提高其性能,那么字符串常量池的具体原理是什么,我们带着以下三个问题,去理解字符串常量池: 字符串常量池的设计意图是什么? ...
matlab中函数或变量无法识别怎么办_用MATLAB巧解微分方程实例分析
点"考研竞赛数学"↑可每天"涨姿势"哦! MATLAB巧解微分方程实例分析王少华西安电子科技大学微分方程求解难, 字母一堆看着烦. 写错数字一时爽, 一直 ...
ecshop怎么写原生php,ecshop模板中直接写php的方法
大家都知道ecshop模板是dwt文件的格式或者lbi文件的格式,而php 代码是不能写在模板里的,只能写在php程序中. 那么有什么办法可以直接写在dwt和lbi文件里呢?ecshop模板给出解决 ...
python数据导出excel模板中的脚本_Python实现将数据库一键导出为Excel表格的实例...
数据库数据导出为excel表格,也可以说是一个很常用的功能了.毕竟不是任何人都懂数据库操作语句的. 下面先来看看完成的效果吧. 数据源导出结果依赖由于是Python实现的,所以需要有Python ...
c语言定义函数insert,c语言编写函数insert(char s1[ ]，char s2[ ]，int pos)，实现在字符串s1中的指定位置pos处插入字符串s2。...
满意答案人變了心從未推荐于 2016.10.18 采纳率:54% 等级:12 已帮助:6450人你写这个貌似不能实现额用string.h库很容易实现的要是你不能用string.h的话 ...
python找最长的字符串_在字符串python中查找最长的唯一子字符串
我正在尝试一个古老的问题(有很多版本),即寻找一个不包含重复字符的字符串的最长子字符串.我不明白为什么我的尝试没有成功:def findLongest(inputStr): resultSet = [ ...
字符串处理：输入字符串s1和s2以及插入位置f，在字符串s1中的指定位置f处插入字符串s2。如输入BEIJING， 123， 3，则输出:BEI123JING。
输入第一行和第二行分别输入两个字符串s1和s2,第三行输入插入位置f. 每个字符串的长度不超过100个字符. 输出输出一行插入后的字符串. 样例输入: BEIJING 123 3 样例输出: BE ...
js的alert弹框中怎么写html,JavaScript基础教程之alert弹出提示框实例
alert 命令弹出一个提示框为便于对 JavaScript 有一个直观的认识,本节会提供几个简单的实例供 JavaScript 入门学习之用.下面的代码是一个弹出提示框的例子: alert(&qu ...
python多个分隔符分割字符串_Python中带有多个分隔符的拆分字符串
智慧大石对于任何可迭代的分隔符,以下是使用正则表达式的安全方法:>>> import re>>> delimiters = "a", &quo ...
linux中mtd动态加载,Linux 2.6.11 下 MTD驱动情景实例分析
最近几天为了熟悉linux的驱动开发,我选择了其MTD驱动做了一些研究.我能找到的文章中我觉得有些部分不够细致,所以我还是自己写了一部分分析,希望对别人也能有所帮助,也做为自己的一个备忘,.蓝色文字的 ...

字符串模板中怎么写html标签,ES6模板字符串和标签模板的应用实例分析

字符串模板中怎么写html标签,ES6模板字符串和标签模板的应用实例分析相关推荐

最新文章

热门文章