Truncate a String In Javascript With The slice(), substr(), and substring() Methods

Introduction

You can shorten a string and limit the character length of a sentence using the slice(), substr(), and substring() methods. You might want to prevent character overflow or shorten the excerpt of a blog post and adding a “read more…“ at the end of it.

Also, At the end of this article, I have added a performance comparison between each method.

1. Truncate a String With The slice() Method

Probably the easiest way to shorten a sentence and limit the number of characters is by using the slice() method. It extracts the text from the string and returns a new string without modifying the original string.

const str = "The quick brown fox jumps over the lazy dog.";

console.log(str.slice(0, 15));
// "The quick brown"

The slice() method accepts two arguments, beginIndex and endIndex. In the example above, we started chopping the sentence from the starting to character at index[15].

We can concatenate the sliced sentence with ... give it a sense of continuity:

const str = "The quick brown fox jumps over the lazy dog.";

console.log(str.slice(0, 15) + "...");
// "The quick brown..."

Since we understand the concept, we can now write a function to take a string and number, then return the truncated sentence.

We can also add a condition to the mix and make sure if the sentence’s length is smaller than the number, return the original sentence.

const str = "The quick brown fox jumps over the lazy dog.";

function truncate(str, num) {
  if (str.length > num) {
    return str.slice(0, num) + "...";
  } else {
    return str;
  }
}

truncate(str, 15);
// "The quick brown..."

We can write the same function with ternary operators:

const str = "The quick brown fox jumps over the lazy dog.";

function truncate(str, num) {
  let truncatedString = str.length > num ? `${str.slice(0, num)}...` : str;
  return truncatedString;
}

truncate(str, 15);
// "The quick brown..."

2. The substr() Method

The substr() method is pretty similar to the slice() method. You have to provide a beginIndex and an endIndex.

const str = "The quick brown fox jumps over the lazy dog.";

function truncate(str, num) {
  let truncatedString = str.length > num ? `${str.substr(0, num)}...` : str;
  return truncatedString;
}

truncate(str, 15);
// "The quick brown..."

3. The substring() Method

The substring() method returns the part of the string between the start and end indexes, or to the end of the string. This method is also similar to the previous one.

Note that NaN is treated as 0 in this method.

const str = "The quick brown fox jumps over the lazy dog.";

function truncate(str, num) {
  let truncatedString = str.length > num ? `${str.substring(0, num)}...` : str;
  return truncatedString;
}

truncate(str, 15);
// "The quick brown..."

Performance Comparison

As I was writing this article, I realized all three methods are very similar. So I decided to run a performance comparison. According to the benchmark, using ternary operators decreases the computing time.

I initiated a VERY long string by creating an array and using the toString() method. You can read the “Javascript Array To String” here.

Link to the jsbench.me