How to Truncate a String in JavaScript

Introduction

Truncate means to cut off something. In Computer science and programming, it refers to an operation that truncates (cuts off) data, such as text from a string or file, by removing letters or digits from the end. In this challenge, we will create a function with two arguments: a string and a number. The string will store our word or sentence, while the number variable will hold a numerical value. Our task is to truncate the text to the length specified by the number. If the text length is greater than the number, we should add three dots (...) to the truncated text. If the text length is equal to or less than the number, we should keep the original string as it is. It might be a bit confusing at first, but don’t worry, you will understand everything as we delve deeper into the topic. Let’s start coding for better understanding.

Remember, each coding challenge can be solved by using any programming language. And also, there are countless ways to solve each coding challenge in different ways.

Solution:

function truncateString(str, num) {
 if(str.length > num) {
   return str.slice(0,num) + "..."
 }
                
 if(str.length === num || str.length < num) {
   return str;
 }
}
 
console.log(truncateString("Peter Piper picked a peck of pickled peppers", 11));
// output: Peter Piper...

Don't worry about the code I used above, we haven't gone into depth yet.

Breaking Up Solution:

As you can see above there is a function truncateString with two arguments str and num, as I mentioned above str is a variable where word/sentence is stored as eg ("Peter Piper picked a pick of pickled peppers") while num is a variable where our numeric value will be stored as (11), since this is a common function so no further investigation is required.

Now that we understand the function, it's time to start coding to solve it. First, we need to apply an if/else condition to truncate (cut off) text if the str is greater than num, adding three dots at the end of the text (truncat…). As you can see below, we did the same by using if(str.length > num). This condition checks if the length of str is greater than num and returns str.slice(0, num) + "…". This expression creates a string with a length exactly as num and adds three dots at the end. The slice() function is used to truncate the string, with its arguments slice(0, num) ensuring that the string starts from the first letter (0 is the index) and ends with a length equal to num, followed by +"…" to add three dots at the end of the text.

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

We have taken the first step, but it is not sufficient for all tests. This step will only pass the tests if the length of str is greater than num. However, what if str is less than or equal to num? In such cases, we need to write an additional condition to handle this scenario.

To achieve this, we can use the following condition: if(str.length === num || str.length < num). This condition ensures that the full text is returned if the length of str is equal to or less than num. In this statement, we used the || operator, which is known as the OR operator in JavaScript. It is used to combine multiple conditions in the same if statement.