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`;

复制代码