How to Add Character to String in JavaScript

JavaScript strings are immutable, so you cannot change a character inside an existing string. To add text, combine the original string with the new text and use the resulting string, either in a new variable or by assigning it back to the original variable. Use + or a template literal for simple additions, concat() to join strings, or string slicing or an array when inserting text at a chosen position.

Add Characters to the Start or End of a String

Put the new text before the existing string to add it at the start, or after it to add it at the end. For example, "H" + "ello" produces "Hello", while "Hello" + "!" produces "Hello!". The + operator evaluates from left to right, so the order of the operands determines where the text appears.

Run this example:

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

Hello

To append text, reverse the operands: existingString + charToAdd. Reassign if you want the variable to refer to the result: existingString = existingString + charToAdd requires existingString to be declared with let, rather than const.

Use the + Operator and Template Literals

The + operator works well for joining a small number of values. Template literals offer another readable form, especially when a string includes several variables or expressions. Write a template literal between backticks and place each value inside ${}. For example, `${firstName} ${lastName}` combines two variables with a space between them. To add text at the start or end, put its expression in the corresponding position inside the template literal.

Both approaches create a new string; neither changes the source strings. Use whichever makes the intended order easiest to read. For a fixed separator between several values, a template literal can make that separator visible directly in the result.

Use concat() to Join Strings

The concat() method returns a new string containing its receiver followed by each supplied argument. The receiver sets the first part of the result: "Hello".concat("!") appends an exclamation mark, while "H".concat("ello") adds text at the start of "ello" by making "H" the receiver. The method does not mutate either string. See the JavaScript concat() reference for its API details.

When adding values from an array, start with the string and append each value in order. For example, a loop that applies result = result.concat(character) for each item in characters builds one result string. Initialize result with the starting text before the loop. For many pieces of text, accumulating values in an array and calling join("") once can be clearer than repeatedly building a string.

Insert Characters at a Specific Position

To insert text at index position, join the portion before that index, the inserted text, and the portion from that index onward. With slice(), the expression is original.slice(0, position) + inserted + original.slice(position). The first call takes characters up to but not including the index; the second takes the remainder. JavaScript string indexes count UTF-16 code units, so indexes may not match user-perceived characters for emoji or some other Unicode text.

substring() can express the same pattern: original.substring(0, position) + inserted + original.substring(position). For nonnegative indexes within the string, it takes the range between its two arguments; with one argument, it takes the rest of the string. slice() also supports negative indexes, while substring() treats negative arguments as zero and swaps its arguments when the first is greater than the second. Choose based on the index behavior your code needs.

Build a String from an Array

For an insertion that is easier to describe as an array edit, split the string into parts, use splice() to insert an item, then join the array back into a string. For example, const parts = original.split("") creates an array of UTF-16 code units; parts.splice(position, 0, inserted) inserts without removing an item, and parts.join("") creates the resulting string. The position is a zero-based array index, so 0 inserts before the first item and parts.length appends after the last.

This approach is useful when you already need to edit a collection of characters or perform several array operations. For text that may contain characters outside the basic multilingual plane, Array.from(original) iterates by Unicode code point rather than UTF-16 code unit. Neither split("") nor Array.from() groups combining marks into user-perceived graphemes; use a grapheme-aware approach when the position must correspond to what a person sees as one character.