JavaScript 字串拼接

實際應用中，目標字串的生成可能需要多個子字串拼接而成。

由於應用頻繁，幾乎是所有程式語言都必須掌握的操作，當然每種語言具有各自特點。

本文將通過程式碼例項詳細介紹一下JavaScript如何實現字串拼接操作。

一.使用加號（+）拼接：

加號不但可以實現算數運算，也可以實現字串拼接操作。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
console.log("螞蟻部落"+"青島市南區");

程式碼執行效果截圖如下：

上述程式碼使用加號（+）實現兩個字串的拼接操作。

目的是演示加號拼接功能，實際專案中根本沒可能這麼用。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let webName="螞蟻部落";
let address="青島市南區";
let str=webName + "位於" + address;
console.log(str);

程式碼執行效果截圖如下：

程式碼實現了字串拼接效果，webName與address是變數，不能將它們直接包裹於引號之中。

否則，webName與address就不是變數了，變數名稱直接就成為字串的一部分。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let webName="螞蟻部落";
let address="青島市南區";
let str="webName位於address";
console.log(str);

程式碼執行效果截圖如下：

二.字串與非字串資料拼接：

前面程式碼都是字串之間的拼接操作，其實字串資料也可以與非字串資料進行拼接。

首先看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
console.log(5+"5");

程式碼執行效果截圖如下：

可數字5與字串"5"進行拼接，首先會將數字轉換為字串，然後再進行拼接操作。

當然字串不止可以和數字進行拼接，也可以與其他資料型別進行拼接操作，本文不再演示。

內在原理是，不同資料型別進行拼接操作的時候，首先會進行隱式資料型別轉換。

考慮到篇幅問題，本文不做介紹，參閱JavaScript 隱式資料型別轉換一章節。

三.模板字串實現拼接：

ES2015之前只能通過加號實現字串拼接，如果資料量較大，那麼程式碼看起來比較繁瑣。

現在新增了更為簡單的字串拼接方式，使用模板字串與佔位符可以實現更為簡潔直觀的拼接操作。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let webName="螞蟻部落";
let address="青島市南區";
let str = `${webName}位於${address}`;
console.log(str);

程式碼執行效果截圖如下：

上面利用模板字串與佔位符實現了非常簡潔直觀的拼接操作。

省去了加號運算子，這也是簡潔直觀的關鍵因素，更多內容參閱如下兩篇文章：

（1）.佔位符參閱${} 佔位符用法一章節。

（2）.模板字串參閱JavaScript 模板字串一章節。

四.字串一旦建立不可更改：

字串一旦建立，其值不可更改，看如下程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let str="螞蟻部落";
let str=str+"青島市南區";
console.log(str);

程式碼執行效果截圖如下：

最後列印結果是"螞蟻部落青島市南區"，這時候肯定會有朋友問，字串的值不是已經改變了嗎。其實不然，改變的是str變數值，上述操作首先銷燬原來字串"螞蟻部落"，然後再將拼接後的新字串"螞蟻部落市南區"賦值給變數str，並不是直修改原字串。