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

全栈程序员-用户IM • 2022年5月18日上午10:20 • 未分类

大家好，又见面了，我是你们的朋友全栈君。

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>

运行结果

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