es6 转义html字符函数,ES6 -- 模板字符串使用方法
ES5输出模板字符串
我们在之前的ES5中使用javascript输出模板字符串的方法，通常是下面这样。
例子：
let name = '王小端coder';
let age = 28;
document.getElementById('string').innerHTML = 'My name is ' + name + ' and my age is ' + age + '';
复制代码
这样的做法需要使用大量的""(双引号)和+来拼接才能得到我们需要的模版。但是这样是十分不方便的。
ES6输出模板字符串
现在使用ES6提供了模板字符串，具体写法如下
例子：
let name = '王小端coder';
let age = 28;
document.getElementById('string').innerHTML = `My name is ${name} and my age is ${age}`;
复制代码
模板字符串用`(反引号)标识，用${}将变量括起来。这样写出来就方便多了。
模板字符串中的反引号的使用
由于反引号是模版字符串的标识，如果我们需要在字符串中使用反引号，我们就需要对其进行转义。
例子：
let name = '王小端coder';
let age = 28;
document.getElementById('string').innerHTML = `My name\`s ${name} and my age is ${age}`;
复制代码
注意看上面例子中的区别，将name is 修改为了 name `s
模板字符串引用变量/引用表达式/引用方法引用变量
看上面例子里面的name和age就是变量，在模板中使用了${}进行包围就可以实现了变量的引用。引用表达式
例子：
document.getElementById('string').innerHTML = `${ 1 + 2 }`
复制代码
在${} 可以放置任意表达式引用方法
let name = '王小端coder';
let age = 28;
function fun() {
return 'andmy age is';
}
document.getElementById('string').innerHTML = `My name\`s ${name} ${fun()} ${age}`
复制代码
在${} 可以放置任意方法
模板字符串的多行使用
let name = '王小端coder';
let age = 28;
document.getElementById('string').innerHTML = `My name\`s
${name}
and my age is
${age}`;
复制代码
注意：如果使用模版字符串表示多行字符串，所有的空格和缩进都会被保存在输出中！！
模板字符串嵌套
let name = '王小端coder';
let age = 28;
const tmp = `My name is ${name} and my age is ${`${age}`}`;
document.getElementById('string').innerHTML = tmp;
复制代码
模板编译
通过模板字符串，生成正式模板的实例
例子：
let template = `
let parse = eval(compile(template));
document.getElementById('string').innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });
function compile(template){
const evalExpr = //g;
const expr = //g;
template = template
.replace(evalExpr, '`); \n echo( $1 ); \n echo(`')
.replace(expr, '`); \n $1 \n echo(`');
template = 'echo(`' + template + '`);';
let script =
`(function parse(data){
let output = "";
function echo(html){
output += html;
}
${ template }
return output;
})`;
return script;
}
复制代码
标签模板
模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能。标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。
例子：
alert`王小端coder`;
复制代码