在 JavaScript 中向字串新增字元

JavaScript 字串是不可變的，因此無法直接修改既有字串中的字元。若要新增文字，請將原字串與新文字組合，再使用產生的新字串；可以存入新變數，也可以指定回原變數。簡單新增文字可使用 + 或樣板字串；連接字串可使用 concat()；若要在指定位置插入文字，則可使用字串切片或陣列。

在字串開頭或結尾新增字元

將新文字放在既有字串之前，就能新增到開頭；放在之後，則會新增到結尾。例如，"H" + "ello" 會產生 "Hello"，而 "Hello" + "!" 會產生 "Hello!"。+ 運算子會由左至右計算，因此運算元的順序會決定文字出現的位置。

執行以下範例：

本節中的程式碼以及顯示的標籤或輸出仍為英文。

const existingString = "ello";
const charToAdd = "H";
const newString = charToAdd + existingString;
console.log(newString);

Hello

若要在字串結尾新增文字，請交換運算元順序：existingString + charToAdd。若要讓變數指向運算結果，請重新指定值：existingString = existingString + charToAdd。此時 existingString 必須以 let 宣告，不能以 const 宣告。

使用 + 運算子與樣板字串

+ 運算子適合連接少量值。樣板字串則是另一種易讀的寫法，尤其適合字串包含多個變數或運算式時。以反引號括住樣板字串，並將各個值放在 ${} 中。例如，`${firstName} ${lastName}` 會在兩個變數之間加入一個空格。若要在字串開頭或結尾新增文字，請將對應的運算式放在樣板字串中的相應位置。

這兩種方式都會建立新字串，不會修改來源字串。請選擇能清楚呈現預期順序的寫法。若要在多個值之間加入固定分隔符，樣板字串能直接顯示結果中的分隔符。

使用 concat() 連接字串

concat() 方法會傳回新字串，內容依序為呼叫方法的字串，以及提供的各個引數。呼叫方法的字串會成為結果的第一部分："Hello".concat("!") 會在結尾加上驚嘆號；"H".concat("ello") 則以 "H" 作為呼叫方法的字串，將文字加到 "ello" 前面。此方法不會改動任一字串。如需 API 詳細資訊，請參閱 JavaScript concat() 參考文件；目前提供的參考文件只有英文版。

若要新增陣列中的值，請以字串作為起始值，並依序附加每個值。例如，迴圈逐一對 characters 中的項目執行 result = result.concat(character)，即可建立一個結果字串。請在迴圈開始前，先用起始文字初始化 result。若有許多文字片段，先將它們累積在陣列中，再呼叫一次 join("")，可能比反覆建立字串更清楚。

在指定位置插入字元

若要在索引 position 插入文字，請依序連接索引之前的部分、要插入的文字，以及從該索引開始的剩餘部分。使用 slice() 時，運算式為 original.slice(0, position) + inserted + original.slice(position)。第一次呼叫會取得索引之前的字元，不包含該索引；第二次則取得其餘部分。JavaScript 字串索引以 UTF-16 程式碼單位計算，因此遇到表情符號或其他某些 Unicode 文字時，索引位置可能與使用者感知的字元位置不同。

也可以用 substring() 表達相同模式：original.substring(0, position) + inserted + original.substring(position)。若索引是字串內的非負值，它會取得兩個引數指定範圍內的內容；只提供一個引數時，則會取得該位置之後的剩餘內容。slice() 也支援負索引；substring() 會將負引數視為零，並在第一個引數大於第二個時交換兩者。請依程式所需的索引行為選擇方法。

從陣列建立字串

若以陣列編輯來描述插入操作更直觀，可以先將字串拆成多個部分，再用 splice() 插入項目，最後將陣列合併回字串。例如，const parts = original.split("") 會建立由 UTF-16 程式碼單位組成的陣列；parts.splice(position, 0, inserted) 會插入項目而不移除任何項目；parts.join("") 則會建立結果字串。位置是從零開始的陣列索引，因此 0 會插在第一個項目前，而 parts.length 會附加在最後一個項目之後。

若你本來就需要編輯字元集合或執行多項陣列操作，這種方式會很實用。對於可能含有基本多文種平面以外字元的文字，Array.from(original) 會依 Unicode 碼位迭代，而非依 UTF-16 程式碼單位迭代。split("") 和 Array.from() 都不會將組合附加符號合併為使用者感知的字素；若位置必須對應人們視為單一字元的內容，請使用能辨識字素的處理方式。