Add a Space between the Characters of a String in JS

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Add a Space between the Characters of a String #

To add a space between the characters of a string, call the split() method on the string to get an array of characters, and call the join() method on the array to join the substrings with a space separator, e.g. str.split('').join(' ').

index.js
const str = 'apple'; const result = str.split('').join(' '); console.log(result); // 👉️ "a p p l e"

We used the String.split() method to split the string into an array of characters.

When called with an empty string separator, the split() method converts the string into an array of characters.

index.js
const str = 'apple'; // 👇️ ['a', 'p', 'p', 'l', 'e'] console.log(str.split(''));

The last step is to call the Array.join method with a space separator.

index.js
// 👇️ "a b c" console.log(['a', 'b', 'c'].join(' '));

The join() method joins the array elements into a string based on the provided separator.

If your string contains spaces, you might need to remove the empty elements from the array.
index.js
const str = 'app le'; // 👇️ ['a', 'p', 'p', ' ', ' ', 'l', 'e'] console.log(str.split(''));

We split the string on each character, so the array contains empty string elements.

We can remove the empty strings by using the Array.filter method.

index.js
const str = 'app le'; const result = str .split('') .filter(element => element.trim()) .join(' '); // 👇️ "a p p l e" console.log(result);

The function we passed to the filter method gets called with each element in the array.

On each iteration, we use the trim() method to remove any leading or trailing spaces from the array element.

If the element contains only spaces, trim() returns an empty string.
index.js
console.log(' '.trim()); // 👉️ ""

The filter method returns a new array containing only the truthy values that the callback function returned.

Truthy are all the values that are not falsy.

The falsy values in JavaScript are: false, null, undefined, 0, "" (empty string), NaN (not a number).

Since empty strings are falsy, none of the empty strings get added to the array that the filter method returns.

Alternatively, you could use a for...of loop.

To add a space between the characters of a string:

  1. Use a for...of loop to iterate over the string.
  2. Declare an empty string variable.
  3. On each iteration, add the character and a space to the string.
index.js
const str = 'app le'; let spaced = ''; for (const char of str) { if (char.trim()) { spaced += char + ' '; } } console.log(spaced); // 👉️ "a p p l e"

We used the for...of loop to iterate over the string.

We check if each character is not an space before adding the character and a space to the new string.

This approach achieves the same result as using the split() and join() methods.

If you don't need to handle a scenario where your string contains spaces, remove the if block.

index.js
const str = 'apple'; let spaced = ''; for (const char of str) { spaced += char + ' '; } console.log(spaced); // 👉️ "a p p l e"
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.