Template Literals > Your Old Code

#webdev #javascript #productivity #programming

Few day ago i noticed my friend still using the same old code for string concatenation i mean it good but it gets messy and hard to read when the code gets bigger

In this blog we will cover :

Traditional string concatenation
Template literal syntax
Multi-line strings
Use cases in modern JavaScript

Traditional string concatenation

Before we get into t*emplate literals* lets see the old traditional way

In this you have to use + symbol when you want to concatenate the strings

const userName = "kunal"
const balance = 100

const str1 = 'Hi ' + userName + ',' + ' your balance is ' + balance + '.'

console.log(str1)

Output of the above code

Hi kunal , your balance is 100.

Note how using regular string involves adding many + symbols also you have to add white spaces too at right place.

This can get difficult and hard to read over time when your code get lengthy

with template literals you can do this easily. let see

Template literal

Template literals are the ES6 feature in JavaScript that lets you to concatenate the string by just using backticks


const userName = "kunal"
const balance = 100

const str2 = `Hi ${userName}, your balance is ${balance}.`
console.log(str2)

Output of the above code

Hi kunal , your balance is 100

With template literals there is no need to add any plus signs and extra white spaces.
You just write everything together as a single string in backticks using the ${} syntax

Multi-line strings

Another way template literals make it easier to work with stings when we are dealing with multi-line strings

In traditional string :


const regularString = 
'Hello there! \n' +
'Please like the blog \n' +
'And share it'

Output of the above code

Hello there! 
Please like the blog
And share it

We have to use the combination of + sign and \n to denote new line.

In template literals :


const templateLiteral = 
`Hello there!
Please like the blog
And share it`

Output of the above code

Hello there! 
Please like the blog
And share it

Template literals preserve line breaks and formatting exactly as written.

By using backticks, you don’t need + or \n the string is handled automatically in a clean and readable way.

Use cases in modern JavaScript

So far, you've learned what template literals are and how they compare with traditional strings method. Now, let's look at some practical example.


function formatMessage (strings , ...values){
  const concatinateStrings = ''  

  for(let i = 0  ; i < values.length ; i++ ){
      concatinateStrings = strings[i] + values[i]
   }

  finalString += strings[strings.length - 1]
  return finalString.trim()

}


const user = 'Kunal'
const task = 'JavaScript blog'
const time = '2 hours'

const message = formatMessage`
  ${user} completed the ${task}
  in ${time}.
`

console.log(message)

Output of the above code

Kunal completed the JavaScript blog
in 2 hours.

In this example, the formatMessage function receives a template literal with four expressions:


${user}

${task}

${time}

The values array will contain the evaluated values of these expressions.

You also learned about an advanced feature of template literals: tagged template literals.
These are functions that take in an array of string blocks and expressions.

Thanks for reading ! if enjoyed this blog , you can read more on this 👇