3 Sep 2014

JS中几种多行字符串的实现方法

Javascript中,通过使用一对双引号「”」或单引号「’」来表示字符串. 但是当需要定义长字符串时, 将所有字符串写在同一行内,很大程度上影响了可读性和可调试性, 尤其是定义字符串来表示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>
*/});

Tags:

0 comments