JavaScript[容易忽視的錯誤]：當續行遇到換行，分行符號丟失

標籤：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，避免後面的代碼被注釋掉，或者使用範圍注釋符（/* */）對代碼進行注釋。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

JavaScript[容易忽視的錯誤]：當續行遇到換行，分行符號丟失