How to Truncate a String in JavaScript
Tags: tutorial, challenge, webdev, javascript
Published: 2021-01-07 00:55:57

## [Link to video](https://youtu.be/1mYTn5FQgNk)

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:
```javascript
        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
```javascript
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
```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring).

.substr() gets a sub string of the the string its chained 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(2,4)
```javascript
function truncate(string,limit){
    if(string.length > limit){
      string.substr(0, limit) + "..."
    }else{
      //return the string
    }
}
```
Otherwise we just want to return the string
```javascript
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
```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) and [ternaries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) we get this!
```javascript
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 [here](https://hellodevworld.com/misc/365-of-coding-announcement).