ES6的多行字符串
2019-02-25 本文已影响0人
NSWhoohoo
HTML的内容为了易读，需要多行书写，保留缩进和回车
但是在JS中这样书写是合法的，错误提示Unterminated string literal
var htmlString = "
<html>
<head>
<meta charset='utf-8'></meta>
<meta name='viewport' content='width=device-width initial-scale=1'></meta>
<title>HTML</title>
</head>
<body>
</body>
</html>
"
ES6中的模版字符串
模板字符串(Template String)是增强版的字符串，用反引号(``)标识，可以定义多行字符串，所有的空格、缩进和换行都会被保留
var htmlString = `
<html>
<head>
<meta charset='utf-8'></meta>
<meta name='viewport' content='width=device-width initial-scale=1'></meta>
<title>HTML</title>
</head>
<body>
</body>
</html>
`
ES5的hack
在ES5中有三种合法的方式来写这种多行字符串
转义newline
var htmlString = " \
<html> \
<head> \
<meta charset='utf-8'></meta> \
<meta name='viewport' content='width=device-width initial-scale=1'></meta> \
<title>HTML</title> \
</head> \
<body> \
</body> \
</html> \
"
拼接字符串
var htmlString = " +
<html> +
<head> +
<meta charset='utf-8'></meta> +
<meta name='viewport' content='width=device-width initial-scale=1'></meta> +
<title>HTML</title> +
</head> +
<body> +
</body> +
</html> +
"
join字符串数组
var htmlString = [
'<html>' ,
'<head>',
'<meta charset='utf-8'></meta>',
'<meta name='viewport' content='width=device-width initial-scale=1'></meta>',
'<title>HTML</title>',
'</head>',
'<body>',
' </body>',
'</html>'
].join('')
这样对比一看，还是ES6语言的新特性方便很多
