Template strings, also known as template literals, are a feature in JavaScript that allows you to embed expressions inside string literals. They are enclosed by backticks () and can contain placeholders ${expression} that are replaced with the values of the expressions during runtime. Here’s a simple example:
// Basic template string
const name = "John";
const greeting = `Hello, ${name}!`;
console.log(greeting);
// Output: Hello, John!
Template strings provide a more concise and readable way to concatenate strings and include variables or expressions within them. You can also use multi-line strings without the need for explicit line breaks:
// Multi-line template string
const multiLineString = `
This is a
multi-line
string.`;
console.log(multiLineString);
/*
Output:
This is a
multi-line
string.
*/
Additionally, template strings support expressions and functions:
// Expressions in template strings
const a = 5;
const b = 10;
const sum = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(sum);
// Output: The sum of 5 and 10 is 15.
// Functions in template strings
function capitalize(str) {
return str.toUpperCase();
}
const city = "new york";
const formattedString = `Welcome to ${capitalize(city)}.`;
console.log(formattedString);
// Output: Welcome to NEW YORK.
Template strings are a powerful feature in JavaScript that enhances string handling and improves code readability.
Template Strings in ES6 provide us with an alternative to string concatenation. They also
allow us to insert variables into a string. that make quite easy for String Concatenation in ES6
But with a Template Strings, we can create one string and insert the variable values by surrounding them with ${ }:
Example of Traditional Strings Concatenation:
console.log(lastName + “, ” + firstName + ” ” + middleName )
Example of Concatenation with Template Strings in ES6
console.log(`${lastName}, ${firstName} ${middleName}`)
Default parameters in ES6?
ES6 also provides default parameters if there is no argument
Syntax:
function functionname(param1 = defaultValueone, ..., nthpara = nth defult value) { ... }
Example:
function Sun(a, b = 10) {
return a + b
}
multiply(10, 2) // output will be 12
multiply(10) // output will be 20
multiply(10, undefined) // output will be 20
What is Transpiling ES6?
Through Transpiling ES6 we can easily convert ES6 to ES5
currently, most of the browsers support ES6. but if does not support then Transpiling ES6 is used to convert ES6 to ES5
Example of ES6 to ES5
const add = (x=5, y=10) => console.log(x+y);
Convert ES6 to ES5 through Transpiling ES6
Transpiling ES6 code of Arrow add function
"use strict";
var add = function add() {
var x = arguments.length <= 0 || arguments[0] === undefined ?
5 : arguments[0];
var y = arguments.length <= 1 || arguments[1] === undefined ?
10 : arguments[1];
return console.log(x + y);
};
In the above example the transpiler added a “use strict” declaration to run in strict mode. The variables x
and y are defaulted using the arguments array, a technique you may be familiar with.
we can transpile JavaScript directly in the browser using the inline Babel transpiler.
we just have to include the browser.js file and any other scripts with type=”text/babel” will be converted (even though Babel 6 is the current version of Babel, only the CDN for
Babel 5 will work)
Example
<script
src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js">
</script>
<script src="script.js" type="text/babel">
</script>