JS中几种多行字符串的实现方法
03 Sep 2014Javascript中,通过使用一对双引号「”」或单引号「’」来表示字符串. 但是当需要定义长字符串时, 将所有字符串写在同一行内,很大程度上影响了可读性和可调试性, 尤其是定义字符串来表示HTML或Javascript代码片段时. 因此, 使用多行字符串则成为了最佳实践, 下面我将为大家介绍几种常见的多行字符串的使用方式.
1.加号累加字符串
var string = "<!DOCTYPE html>"+
"<html>"+
"<head>"+
"<meta charset="UTF-8">"+
"<title>Test</title>"+
"</head>"+
"<body>"+
"This is a testing page;"+
"</body>"+
"</html>"
window.console.log(string);
此方法在最为常见, 但是事实上它并不是多行字符串, 而是单纯的字符串的累加, 如果需要实现多行, 需要手动添加换行符\n.
2.LineContinuation
var string = "<!DOCTYPE html>\
<html>\
<head>\
<meta charset=\"UTF-8\">\
<title>Test</title>\
</head>\
<body>\
This is a testing page;\
</body>\
</html>"
window.console.log(string);
LineContinuation是ECMA-262规范中定义的字符字面量的语法, 语法为：
LineContinuation ::
\ LineTerminatorSequence
LineTerminatorSequence同样是ECMA-262规范中的一部分, 它的值为：
LineTerminatorSequence ::
<LF>
<CR> [lookahead ∉ <LF> ]
<LS>
<PS>
<CR> <LF>
3.Array的join方法
var array = [ "<!DOCTYPE html>", "<html>", "<head>", "<metacharset=\"UTF-8\">",
"<title>Test</title>", "</head>", "<body>", "This is a testing page;",
"</body>", "</html>" ];
var string = Array.prototype.join.call(array, "\n");
window.console.log(string);
此种方法较第一种方法来说, 只需要在调用join时写一次换行符.
4.JS注释
此方法是在网上无意中看到的一个方法, 通过利用Function.prototype的toString方法会输出方法体注释来输出多行字符串.
但是需要注意的是, Function.prototype.toString输出方法体注释并不兼容所有浏览器及引擎, 对于Firefox,Safari浏览器及Rhino引擎是无效的.
Function.prototype.getMultiLine = function() {
var lines = new String(this);
lines = lines.substring(lines.indexOf("/*") + 3, lines.lastIndexOf("*/"));
return lines;
}
var string = function() {
/*
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
This is a testing page;
</body>
</html>
*/
}
window.console.log(string.getMultiLine());
5.multiline.js
multiline.js是一个托管在github的开源项目, 用起来也非常的简单, 只是需要添加相应的JS引用.
Before:
var str = '' +
'<!doctype html>' +
'<html>' +
' <body>' +
' <h1>❤ unicorns</h1>' +
' </body>' +
'</html>' +
'';
After:
var str = multiline(function(){/*
<!doctype html>
<html>
<body>
<h1>❤ unicorns</h1>
</body>
</html>
*/});