How To Add Specific Number Of Spaces To A String In JavaScript

Posted on by Davis Cole
Add specific Number of Spaces to a String in JavaScript

In this article, you’ll learn how to add a specific number of spaces to a string in JavaScript by using the .padStart(), .padEnd() and .repeat() functions. Let’s go into detail now.

Add specific number of spaces to a string in JavaScript

Beginning or end (The .padStart() or .padEnd() or .repeat() function)

The best way of doing this is simply using the String class’ .padStart(), .padEnd() or .repeat() functions. All three are very similar in this specific context, though has different functions.

Syntax: 

String.prototype.padStart(targetLength, padString)

The .padStart() function, as the name implies, “pads” or adds a number of specified letters (the padString parameter) to the beginning of a string until it reaches a specified length (the targetLength parameter). It will not change the original string, only returns a new string.

Syntax:

String.prototype.padEnd(targetLength, padString)

The .padEnd() function, as the name implies, “pads” or adds a number of a specified letter (the padString parameter) to the end of a string until it reaches a specified length (the targetLength parameter). It will not change the original string, only returns a new string.

Syntax:

String.prototype.repeat(count)

The .repeat() function, as the name implies, takes a string and repeats it over a specified number of times (the count parameter). It will not change the original string in any way, only returns a new string.

With these three functions, you will get the following:

Adding to the Beginning:

const str = "LearnShareIT";
const newStr1 = str.padStart(str.length + 5, " ");

// Repeat a Letter several times and add the original String
const newStr2 = " ".repeat(5) + str;

console.log(newStr1);
console.log(newStr2);

Output:

"     LearnShareIT"
"     LearnShareIT"

Adding to the End:

const str = "LearnShareIT";
const newStr1 = str.padEnd(str.length + 5, " ");

// Repeat a Letter several times and add the original String
const newStr2 = str + " ".repeat(5);

console.log(newStr1);
console.log(newStr2);

Output:

"LearnShareIT     "
"LearnShareIT     "

A thing to note is that, as stated above the .padStart() and .padEnd() functions only pad the beginning and end, respectively, of the string until it reaches a specified length. So the targetLength the parameter has to equal the length of the string plus the number of times the string needs to be padded, or specifically:

str.length + count

Middle (The .repeat() function)

Unfortunately, there is no .padMiddle() function, so we’ll have to resort to split the string by an index and adding the repeated letter. You can do so with several functions:

  • String.prototype.substring() or String.prototype.slice(): Practically the same, with some differences in specific cases. It has 2 parameters start and end, which describe the index to start splitting the string and where to end it (will not include the character at the end index).
  • String.prototype.split() and Array.prototype.join(): Works in a pair. Both have the same parameter being separator. The .split() function splits a string by the separator parameter into an array, and the .join() function puts it back together into a new string separated by the separator parameter. There is more to the .split() function, which you can read here.

This chapter will cover how to add a string to an index. i.e., if the index is 0 , the string will be added at the beginning of the string. If the index is 1, it will be added after the first letter. If the index is the length of the string being added to, the string will be added at the end of the string, etc.

If you decide to use the .substring() or .slice() method, you need to add the substring from the index 0 to the specified index, the repeated string, and the substring from the specified index to the final index.

Example:

const str = "LearnShareIT";

// Create the function to add the string to the beginning, middle, or end of the string
function insertMiddle(str, index, inStr, count) {
	const begin = str.substring(0, index);
	const end = str.substring(index);
	const middle = inStr.repeat(count);
	return begin + middle + end;
}

// Insert 5 blank spaces at the 5th index
console.log(insertMiddle(str, 5, " ", 5));

Output:

"Learn     ShareIT"

In this case, the .substring() and .slice() functions are interchangeable in this situation. Additionally, if you omit the end parameter of said functions, it will default to the length of the string.
Suppose you use the .slice() and .join() methods. In that case, you need to split the string up by an empty space ("") into an array with the .split() function, add to the beginning of the character at the specified index in the array, then finally join the array together by an empty space ("") with the .join() function.

Example:

const str = "LearnShareIT";

// Create the function to add the string to the beginning, middle, or end of the string
function insertMiddle(str, index, inStr, count) {
	const arr = str.split("");

	if (index < str.length) {
		arr[index] = inStr.repeat(count) + arr[index];
	} else {
		arr.push(inStr.repeat(count));
	}

	return arr.join("");
}

// Insert 5 blank spaces at the 5th index
console.log(insertMiddle(str, 5, " ", 5));

Output:

"Learn     ShareIT"

Summary

To add specific number of spaces to a string in JavaScript, you can use the .repeat() or .padStart() functions to add to the beginning, the .repeat() or .padEnd() functions to add to the end. To add a string somewhere in the middle of a string, you need to split a string into two substrings and add the String in the middle with either the .substring() and .slice() or .split() and .join() functions.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *