Add a Space between the Characters of a String in JS

avatar

Borislav Hadzhiev

Thu Nov 18 20212 min read

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"

The first step is to call the split() method on the string, passing it an empty string as a parameter.

If the separator is an empty string, the string gets converted to an array of characters.

index.js
const str = 'apple'; // ๐Ÿ‘‡๏ธ ['a', 'p', 'p', 'l', 'e'] console.log(str.split(''));

The final step is to cal the Array.join method, passing it a string containing a space as the separator.

index.js
// ๐Ÿ‘‡๏ธ "a b c" console.log(['a', 'b', 'c'].join(' '));

The join method allows us to insert a space between the elements of the array.

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(''));

Because we split on each character, we get some empty array elements.

We can remove them, 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 array element contains only spaces, calling trim() on it would return 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 an empty string is a falsy value, 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.

For each character, we check if it's not an empty space before adding the character + 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, you can remove the if check to make it even simpler.

index.js
const str = 'apple'; let spaced = ''; for (const char of str) { spaced += char + ' '; } console.log(spaced); // ๐Ÿ‘‰๏ธ "a p p l e"

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee