How to Truncate a String in JavaScript

Happy Day 6! Today we are going back to basics. This challenge can easily be applied to front end as well as backend.

Disclaimer: there are MANY ways to solve this problem this is an answer that I would see or use in a coding interview and would accept as a proper answer

TLDR: Solution is at the bottom of the post

The Problem

Create a function that accepts a string and a number. The function must return the given string truncated to the maximum length (number that was passed in) followed by "...". If the string is shorter than the passed maximum length return the passed string.

Example:

        truncate('It works on my machine', 8) // 'It works...'
        truncate('It’s not a bug – it’s an undocumented feature', 14) // 'It’s not a bug...'
        truncate('In order to understand recursion, one must first understand recursion', 'In order to understand recursion, one must first understand recursion'.length)           // 'In order to understand recursion, one must first understand recursion'
        truncate('The cheapest, fastest, and most reliable components are those that aren’t there', 82) //'The cheapest, fastest, and most reliable components are those that aren’t there'
    

Solution

So what do we need to do?

• create a function that accepts a string and a number

• check if the string’s length is greater than the limit that was passed

• if so get the substring of the limit and append “…”

• if not return the string

First we need to create a function that accepts a string and a number

function truncate(string,limit){
  //check if the string’s length is greater than the limit that was passed
  //if so get the substring of the limit and append “…”
  //if not return the string
}

We need to check if the length of the string that was passed in is larger than the number that was passed in

function truncate(string,limit){
    if(string.length > limit){
      //get the substring of the limit and append "..."
    }else{
      //return the string
    }
}

If the length is greater we need to get the substring of the string that was passed up to the limit that was passed. If you are unfamiliar with .substr() check out this MDN article.

.substr() gets a sub string of the the string its chained to based on the two numbers that its passed. With these two numbers it gets the letters between each of those indexes. So in our case we want the beginning of the string to the maximum number of characters we can have so substr(0, limit) but if we only wanted the second letter to the fourth letter it would be substr(1, 3). They are one number off because indexes of strings are 0 indexed so the number starts at 0 instead of 1 so the first letter is index 0, the second letter is index 1, etc. etc.

function truncate(string,limit){
    if(string.length > limit){
      string.substr(0, limit) + "..."
    }else{
      //return the string
    }
}

Otherwise we just want to return the string

function truncate(string,limit){
    if(string.length > limit){
      string.substr(0, limit) + "..."
    }else{
      return string
    }
}

if you want to make it a little shorter you could write it like this as well

function truncate(string, limit){
  if(string.length > limit) string =  string.substr(0, limit) + "..."
  return string
}

Now if we want to clean this up a bit more using template literals and ternaries we get this!

function truncate(string,limit){
    return string.length > limit ? `${string.substr(0,limit)}...` : string;
}

I hope you had fun with this one! Please leave your solutions that you came up with in the comments section. If you have any challenge you would like to see done also leave that in the comments below you may see it come up! If you would like to get the challenge emailed to you every day in morning and a notification when the solution is posted subscribe below