html 模板字符串,ES6:模板字符串[通俗易懂]

html 模板字符串,ES6:模板字符串[通俗易懂]标签:模板字符串JavaScriptES6前端web本博客版权归本人和饥人谷所有,转载需说明来源内容转载自阮一峰老师的ES6入门1.基本用法传统的JavaScript语言,输出模板通常是这样写的。$('#result').append('Thereare'+basket.count+''+'itemsinyourbasket,'+''+basket.onSa...

标签: 模板字符串 JavaScript ES6 前端 web

本博客版权归本人和饥人谷所有,转载需说明来源

内容转载自阮一峰老师的ES6入门

1.基本用法

传统的JavaScript语言,输出模板通常是这样写的。

$('#result').append(

'There are ' + basket.count + ' ' +

'items in your basket, ' +

'' + basket.onSale +

' are on sale!'

);

上面这种写法相当繁琐不方便,ES6引入了模板字符串解决这个问题。

$('#result').append(`

There are ${basket.count} items

in your basket, ${basket.onSale}

are on sale!

`);

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

// 普通字符串

`In JavaScript '\n' is a line-feed.`

// 多行字符串

`In JavaScript this is

not legal.`

console.log(`string text line 1

string text line 2`);

// 字符串中嵌入变量

var name = "Bob", time = "today";

`Hello ${name}, how are you ${time}?`

上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。

var greeting = `\`Yo\` World!`;

如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。

$('#list').html(`

  • first
  • second

`);

上面代码中,所有模板字符串的空格和换行,都是被保留的,比如

  • 标签前面会有一个换行。如果你不想要这个换行,可以使用trim方法消除它。

$('#list').html(`

  • first
  • second

`.trim());

模板字符串中嵌入变量,需要将变量名写在${}之中。

function authorize(user, action) {

if (!user.hasPrivilege(action)) {

throw new Error(

// 传统写法为

// 'User '

// + user.name

// + ' is not authorized to do '

// + action

// + '.'

`User ${user.name} is not authorized to do ${action}.`);

}

}

大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性。

var x = 1;

var y = 2;

`${x} + ${y} = ${x + y}`

// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`

// "1 + 4 = 5"

var obj = {x: 1, y: 2};

`${obj.x + obj.y}`

// 3

模板字符串之中还能调用函数。

function fn() {

return "Hello World";

}

`foo ${fn()} bar`

// foo Hello World bar

如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。

如果模板字符串中的变量没有声明,将报错。

// 变量place没有声明

var msg = `Hello, ${place}`;

// 报错

由于模板字符串的大括号内部,就是执行JavaScript代码,因此如果大括号内部是一个字符串,将会原样输出。

`Hello ${'World'}`

// "Hello World"

模板字符串甚至还能嵌套。

const tmpl = addrs => `

${addrs.map(addr => `

${addr.first}${addr.last}

`).join('')}

`;

上面代码中,模板字符串的变量之中,又嵌入了另一个模板字符串,使用方法如下。

const data = [

{ first: '', last: 'Bond' },

{ first: 'Lars', last: '' },

];

console.log(tmpl(data));

//

//

//

//

Bond

//

//

Lars

//

//

//

如果需要引用模板字符串本身,在需要时执行,可以像下面这样写。

// 写法一

let str = 'return ' + '`Hello ${name}!`';

let func = new Function('name', str);

func('Jack') // "Hello Jack!"

// 写法二

let str = '(name) => `Hello ${name}!`';

let func = eval.call(null, str);

func('Jack') // "Hello Jack!"

2.实例:模板编译

下面,我们来看一个通过模板字符串,生成正式模板的实例。

var template = `

`;

上面代码在模板字符串之中,放置了一个常规模板。该模板使用放置JavaScript代码,使用输出JavaScript表达式。

怎么编译这个模板字符串呢?

一种思路是将其转换为JavaScript表达式字符串。

echo('

  • ');

for(var i=0; i < data.supplies.length; i++) {

echo('

');

echo(data.supplies[i]);

echo('

');

};

echo('

');

这个转换使用正则表达式就行了。

var evalExpr = //g;

var expr = //g;

template = template

.replace(evalExpr, '`); \n echo( $1 ); \n echo(`')

.replace(expr, '`); \n $1 \n echo(`');

template = 'echo(`' + template + '`);';

然后,将template封装在一个函数里面返回,就可以了。

var script =

`(function parse(data){

var output = "";

function echo(html){

output += html;

}

${ template }

return output;

})`;

return script;

将上面的内容拼装成一个模板编译函数compile。

function compile(template){

var evalExpr = //g;

var expr = //g;

template = template

.replace(evalExpr, '`); \n echo( $1 ); \n echo(`')

.replace(expr, '`); \n $1 \n echo(`');

template = 'echo(`' + template + '`);';

var script =

`(function parse(data){

var output = "";

function echo(html){

output += html;

}

${ template }

return output;

})`;

return script;

}

compile函数的用法如下。

var parse = eval(compile(template));

div.innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });

//

//

broom

//

mop

//

cleaner

//

3.标签模板

模板字符串的功能,不仅仅是上面这些。它可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。

alert`123`

// 等同于

alert(123)

标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。

但是,如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。

var a = 5;

var b = 10;

tag`Hello ${ a + b } world ${ a * b }`;

// 等同于

tag(['Hello ', ' world ', ''], 15, 50);

上面代码中,模板字符串前面有一个标识名tag,它是一个函数。整个表达式的返回值,就是tag函数处理模板字符串后的返回值。

函数tag依次会接收到多个参数。

function tag(stringArr, value1, value2){

// ...

}

// 等同于

function tag(stringArr, ...values){

// ...

}

tag函数的第一个参数是一个数组,该数组的成员是模板字符串中那些没有变量替换的部分,也就是说,变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间,以此类推。

tag函数的其他参数,都是模板字符串各个变量被替换后的值。由于本例中,模板字符串含有两个变量,因此tag会接受到value1和value2两个参数。

tag函数所有参数的实际值如下。

第一个参数:['Hello ', ' world ', '']

第二个参数: 15

第三个参数:50

也就是说,tag函数实际上以下面的形式调用。

tag(['Hello ', ' world ', ''], 15, 50)

我们可以按照需要编写tag函数的代码。下面是tag函数的一种写法,以及运行结果。

var a = 5;

var b = 10;

function tag(s, v1, v2) {

console.log(s[0]);

console.log(s[1]);

console.log(s[2]);

console.log(v1);

console.log(v2);

return "OK";

}

tag`Hello ${ a + b } world ${ a * b}`;

// "Hello "

// " world "

// ""

// 15

// 50

// "OK"

下面是一个更复杂的例子。

var total = 30;

var msg = passthru`The total is ${total} (${total*1.05} with tax)`;

function passthru(literals) {

var result = '';

var i = 0;

while (i < literals.length) {

result += literals[i++];

if (i < arguments.length) {

result += arguments[i];

}

}

return result;

}

msg // "The total is 30 (31.5 with tax)"

上面这个例子展示了,如何将各个参数按照原来的位置拼合回去。

passthru函数采用rest参数的写法如下。

function passthru(literals, ...values) {

var output = "";

for (var index = 0; index < values.length; index++) {

output += literals[index] + values[index];

}

output += literals[index]

return output;

}

“标签模板”的一个重要应用,就是过滤HTML字符串,防止用户输入恶意内容。

var message =

SaferHTML`

${sender} has sent you a message.

`;

function SaferHTML(templateData) {

var s = templateData[0];

for (var i = 1; i < arguments.length; i++) {

var arg = String(arguments[i]);

// Escape special characters in the substitution.

s += arg.replace(/&/g, "&")

.replace(/

.replace(/>/g, ">");

// Don't escape special characters in the template.

s += templateData[i];

}

return s;

}

上面代码中,sender变量往往是用户提供的,经过SaferHTML函数处理,里面的特殊字符都会被转义。

var sender = 'alert("abc")'; // 恶意代码

var message = SaferHTML`

${sender} has sent you a message.

`;

message

//

alert("abc") has sent you a message.

标签模板的另一个应用,就是多语言转换(国际化处理)。

i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`

// "欢迎访问xxx,您是第xxxx位访问者!"

模板字符串本身并不能取代Mustache之类的模板库,因为没有条件判断和循环处理功能,但是通过标签函数,你可以自己添加这些功能。

// 下面的hashTemplate函数

// 是一个自定义的模板处理函数

var libraryHtml = hashTemplate`

#for book in ${myBooks}

#{book.title} by #{book.author}

#end

`;

除此之外,你甚至可以使用标签模板,在JavaScript语言之中嵌入其他语言。

jsx`

ref='input'

onChange='${this.handleChange}'

defaultValue='${this.state.value}' />

${this.state.value}

`

上面的代码通过jsx函数,将一个DOM字符串转为React对象。你可以在Github找到jsx函数的具体实现。

下面则是一个假想的例子,通过java函数,在JavaScript代码之中运行Java代码。

java`

class HelloWorldApp {

public static void main(String[] args) {

System.out.println(“Hello World!”); // Display the string.

}

}

`

HelloWorldApp.main();

模板处理函数的第一个参数(模板字符串数组),还有一个raw属性。

console.log`123`

// ["123", raw: Array[1]]

上面代码中,console.log接受的参数,实际上是一个数组。该数组有一个raw属性,保存的是转义后的原字符串。

请看下面的例子。

tag`First line\nSecond line`

function tag(strings) {

console.log(strings.raw[0]);

// "First line\\nSecond line"

}

上面代码中,tag函数的第一个参数strings,有一个raw属性,也指向一个数组。该数组的成员与strings数组完全一致。比如,strings数组是["First line\nSecond line"],那么strings.raw数组就是["First line\nSecond line"]。两者唯一的区别,就是字符串里面的斜杠都被转义了。比如,strings.raw数组会将\n视为\和n两个字符,而不是换行符。这是为了方便取得转义之前的原始模板而设计的。

本文来源miss废柴,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/209699
0

发表评论