如何给变量赋一个多行字符串？

最新推荐文章于 2023-02-15 14:31:46 发布

iteye_21297

最新推荐文章于 2023-02-15 14:31:46 发布

阅读量561

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： HTML5 JavaScript HTML IE Firefox ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_21297/article/details/81920347

javascript 专栏收录该内容

2 篇文章

订阅专栏

在javascript中如何给变量赋一个多行字符串？

我们经常遇到要给一个变量赋一个多行字符串的场景，通常的做法是祭出引号和转义打法，如：

方法1：

var html1 = "<html>\r\n<head>\r\n</head>\r\n<body>\r\n<a href=\"http://www.taoremai.com\">淘热卖</a>\r\n</body>\r\n</html>";

这种方法最大的问题是把很多本来不再同一行的东西写在了同一行，如果内容长乐看起来那是相当不方便。

方法2：

var html2 = "<html>\r\n"
+"<head>\r\n"
+"</head>\r\n"
+"<body>\r\n"
+"<a href=\"http://www.taoremai.com\">淘热卖</a>\r\n"
+"</body>\r\n"
"</html>";

这种方法解决了第一种方法中所说的问题，但多了很多加号和引号。

那有没与其他更好的方法呢？且看：

方法3：

var html3 = "<html>\r\n\
<head>\r\n\
</head>\r\n\
<body>\r\n\
<a href=\"http://www.taoremai.com\">淘热卖</a>\r\n\
</body>\r\n\
</html>";

请大家注意，前面几行后面多了个反斜杠，这个是javascript 本身就支持的。这种写法有些编辑器下着色可能会有问题。

下面再来看几种变态的写法，这两种方法确实方便，不但省了\r\n,连引号转义都省了。但这些毕竟属于”歪门邪道”这两个方法不推荐:

方法4：

Function.prototype.getMultiLine = function() {   
    var lines = new String(this);   
     lines = lines.substring(lines.indexOf("/*") + 3, lines.lastIndexOf("*/"));   
    return lines;   
}   
 
var html4 = function() {   
/*<html>
<head>
</head>
<body>
<a href="http://www.taoremai.com">淘热卖</a>
</body>
</html>*/
}   
 
document.write(html4.getMultiLine());

这个方法将多行文本写成函数的多行注释内，然后，通过解析字符串，将注释里的文本分离出来，这样，整个注释内容可以复制到JS代码中。这个方法只在IE里支持，Firefox下会有问题。

方法5：

var html5 = (<r><![CDATA[
<html>
<head>
</head>
<body>
<a href="http://www.taoremai.com">淘热卖</a>
</body>
</html>
]]></r>).toString();
 
alert(html5);

这个方法的原理是生成一个XML节点。因为XML可以使用CDATA来生成多行文本。然后，再将这个节点转换成字符串，就可以得到一个多行文本了。不过这个方法只在支持E4X的浏览器上有效。经过测试，Firefox3.0支持，IE7.0不支持。