JavaScript[容易忽视的错误]：当续行遇到换行，换行符丢失

1、引言

在JavaScript中，当定义一个大的字符串，特别是有换行情况时，为了看起来整齐、易读，一般使用续行符，例如：

var script = "var chart = anychart.pieChart([\                ['Chocolate paste', 5],\                ['White honey', 2],\                ['Strawberry jam', 2],\                ['Сondensed milk', 1]\            ]);\//chart.bounds(0, 0, 100%,100%);\var stage = anychart.graphics.create('container', 600, 400);\            stage.container('container');\            chart.container(stage).draw();\       ";

2、问题

如果我们直接拿这段代码去执行，就会发现结果和最初的预想大相径庭，为什么呢？

3、问题分析

因为，作为脚本，使用续行符时，只是保证字符串的连续性和合法（说明这时一个完整的串），但不会将换行符也包含在字符串中。也就是说，上面的代码中，script串将不会包含换行符。这是一个很严重的问题，如果串为脚本代码，且含有行注释符（”//“），则会改变了原有的逻辑，行注释符后面的代码将都被注释掉，不会被执行。

举个例子，下面这个例子通过将脚本代码编码，然后发送到后台执行（如在Node.js中执行），这里为了演示方便，只是简单的遍解码：

<textarea id="textarea1" rows="15" cols="53"></textarea><script lang="javascript">var script = "var chart = anychart.pieChart([\                ['Chocolate paste', 5],\                ['White honey', 2],\                ['Strawberry jam', 2],\                ['Сondensed milk', 1]\            ]);\//chart.bounds(0, 0, 100%,100%);\var stage = anychart.graphics.create('container', 600, 400);\            stage.container('container');\            chart.container(stage).draw();\       ";  var  script_out = encodeURIComponent( script);  var textarea1 = document.getElementById('textarea1');  textarea1.value = decodeURIComponent(script_out);</script>

运行结果

可以看到字符串script中的换行符丢失，代码乱成一团，特别是

//chart.bounds(0, 0, 100%,100%);

这一行和后面的行连成了一体，假设执行这段代码，这其后面的代码均不会被执行。

4、解决办法

在有行注释的代码后加上换行符\n，避免后面的代码被注释掉，或者使用范围注释符（/* */）对代码进行注释。