【ES6学习】字符串的一些扩展方法（二）（火）

6.模板字符串

es6关于字符串最火的用法来了，那就是字符串模板。
传统的 JavaScript 输出模板通常是这样写的。

$( '#result') .append( 
	'There are <b>'+ basket . count + ' </b > '+ 
	'items in your basket,'+ 
	'<em> '+ basket . onSale + 
	' </em> are on sale !' 
)

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

$( ’ #result ’) .append(`
	There are <b>${basket count}</b ＞工 terns
	in your basket, <em>${basket .onSale}</em> 
	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 (`
	<ul> 
	<li> first</li>
	<li>second</li> 
	</ul>
`)

上面的代码中，所有模板字符串的空格和换行都是被保留的，比如 ul 标签前面会有一个换行。如果不想要这个换行，可以使用 trim 方法消除。

$(' #list ') .html (`
	<ul> 
	<li> first</li>
	<li>second</li> 
	</ul>
`.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 => `
	<table> 
	${addrs.map(addr => `
	<tr><td>${addr.first}</td></tr> 
	<tr><td>${addr.last}</td></tr> 
	`).join (’’)} 
	</ table>
`;

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

const data = [ 
	{ first :’<Jane> ’, last :’Bond ’ } , 
	{ first :’Lars ’, las t : ’ <Croft> ’ } ,
]
console . log(tmpl(data)); 
// <table> 
// 
// <tr><td><Jane></td></tr> 
// <tr><td>Bond</td></tr> 
// 
// <tr><td>Lars</td></tr> 
// <tr><td><Croft></td></tr> 
// 
// </table>

如果需要引用模板字符串本身，可以像下面这样写。

//写法1
let str ='return '＋'` Hell $ {name} ！`'；
let func = new Function ( 'name ', str); 
func ('Jack') // ” Hello Jack !” 
//写法2
let str = '(name) ＝＞` Hello $ {name} !`'
let func = eval.call(null, str); 
func ('Jack')//”Hello Jack !”