問題描述
在後端渲染頁面時，如果想要渲染一個javascript變數，且這個變數是一個字串的話。大概是這樣寫：（$a作為服務端變數）
|
1 2 3 4 5 |
... <script> var a = '$a'; </script> ... |
這樣一旦$a值為空時，渲染結果為
|
1 2 3 4 5 |
... <script> var a = ''; </script> ... |
也不會有啥大問題。
但是如果 $a 的值為 \' 之類，可能結果就成了
|
1 2 3 4 5 |
... <script> var a = '''; </script> ... |
如果$a的值為一個json字串，我們希望在javascript中直接當物件使用，渲染成
|
1 2 3 4 5 |
... <script> var a = '{...}'; </script> ... |
還需要做一次JSON.parse(a);
可是如果你寫成這樣：
|
1 2 3 4 5 |
... <script> var a = $a; </script> ... |
渲染結果就可能會成為
|
1 2 3 4 5 |
... <script> var a = ; </script> ... |
問題分析
這個問題可以通過和後端協商解決，比如不得傳值為空，至少來個 null 或 undefined。
我把報錯分為兩大類，一種是取值錯誤，一種是語法錯誤。
取值錯誤是可以通過javascript自身的程式碼修正，一旦出現語法錯誤，可能導致後面的程式碼中斷是無法自行修正的。
我的理念是，服務方為一個黑盒，我們不應該完全信賴。var a = ; 就是一個典型的語法錯誤，造成的後果直接劃分為 p0 級。
難道javascript就沒有什麼方法來靠自身解決這個問題麼。
我的答案
|
1 2 3 4 5 |
... <script> var a = [$a][0]; </script> ... |
如果 $a 傳值為空，將會渲染成
|
1 2 3 4 5 |
... <script> var a = [][0]; </script> ... |
這時 a = undefined, 這樣就將語法錯誤巧妙的轉換成了取值錯誤，後面做一些空值判斷，做相應的處理，就不會給使用者造成太大的震撼。