Prior to ES6 they were called template strings, now we call them template literals. Let's have a look at what changed in the way we interpolate strings in ES6.
In ES5 we used to write this, in order to interpolate strings:
var greeting = 'Hello my name is' + name;
var name = "Alberto";
In ES6 we can use backticks to make our life easier.
const greeting = `hello my name is ${name}`;
let name = "Alberto";
In ES5 we used to write this:
var a = 1;
var b = 10;
console.log('1 * 10 is ' + ( a * b));
// 1 * 10 is 10
In ES6 we can use backticks to reduce our typing:
var a = 1;
var b = 10;
console.log(`1 * 10 is ${a * b}`);
// 1 * 10 is 10
In ES5 we used to do this to write multi-line strings:
// We have to include a backslash on each line
var text = " hello, \
my name is Alberto \
how are you?\ "
In ES6 we simply have to wrap everything inside backticks, no more backslash on each line.
const content = ` hello,
my name is Alberto
how are you?`;
It's very easy to nest a template inside another one, like this:
const markup = `
${people.map(person => `
<li> ${person.name}</li>`)}
`;
We can easily add some logic inside our template string by using a ternary operator:
// create an artist with name and age
const artist = {
name: "Bon Jovi",
age: 56,
}
// only if the artist object has a song property we then add it to our paragraph, otherwise we return nothing
const text = `
`
${artist.name} is ${artist.age} years old ${artist.song ? ` and wrote the song ${artist.song}` : ' '}
</p>
</div>
`
Similarly to the example above, if we want we can pass a function inside a template literal.
const groceries = {
meat: "pork chop",
veggie: "salad",
fruit: "apple",
others: ['mushrooms', 'instant noodles', 'instant soup'],
}
// this function will map each individual value of our groceries
function groceryList(others) {
return `
${others.map( other => `
<span> ${other}</span>`).join(' ')}
`;
}
// display all our groceries in a p tag, the last one will include all the one from the array **others**
const markup = `
${groceries.meat}
${groceries.veggie}
${groceries.fruit}
${groceryList(groceries.others)}
`
By tagging a function to a template literal we can run the template literal through the function, providing it with everything that's inside of the template.
The way it works is very simple: you just take the name of your function and put it in front of the template that you want to run it against.
// our function will take an array of strings and an array of values, Here we use the **rest** operator to take all the values from our variable and put them in an array
function myTag(strings, ...values){
// code goes here
}
const name = "Alberto";
const age = "25";
// we tag the function by putting its name in front of our string
const sentence = myTag `Hello my name is ${name} and I am ${age} years old`;
The first thing we get is an array of strings, which are all the content in between each of our arguments.
The second thing we get are all the arguments that we interpolated. If you don't know how many arguments are there you need to use the rest operator (more on this in a next chapter).
As the name implies the rest operator (the three dots) will just take whatever is left after our first parameter strings and put it into an array.
What we have now are two arrays, one of strings and one of values.
We can now build our own string by combining strings and values together.
function myTag(strings, ...values){
// create an empty variable
let str = ();
// for each string take its value and an index
strings.forEach(string, i => {
// add to the variable the value of the string and the content of values at the index of the string
// as our original string ends with a string it means that we have one more *string* than *value* so we add a simple **||** to check, if there is a value, add it, otherwise add nothing.
str += string + (values[i] || '') ;
});
return str;
}
const name = "Alberto";
const age = "25";
const sentence = myTag `Hello my name is ${name} and I am ${age} years old`;
If we did not add this line
str += string + (values[i] || '') ;
We would have gotten
"Hello, my name is Alberto and I am 25 years oldundefined"
To learn more about use cases of template literals check out this article.
We are going to cover 4 new strings method:
This new method will check if the string starts with the value we pass in:
const code = "ABCDEFG";
code.startsWith("ABB");
// false
code.startsWith("abc");
// false, startsWith is case sensitive
code.startsWith("ABC");
// true
We can pass an additional parameter, which is the starting point where the method will begin checking.
const code = "ABCDEFGHI"
code.startsWith("DEF",3);
// true, it will begin checking after 3 characters
Similarly to startsWith() this new method will check if the string ends with the value we pass in:
const code = "ABCDEF";
code.endsWith("DDD");
// false
code.endsWith("def");
// false, endsWith is case sensitive
code.endsWith("DEF");
// true
We can pass an additional parameter, which is the number of digits we want to consider when checking the ending.
const code = "ABCDEFGHI"
code.endsWith("EF", 6);
// true, 6 means that we consider only the first 6 values ABCDEF, and yes this string ends with EF therefore we get *true*
This method will check if our string includes the value we pass in.
const code = "ABCDEF"
code.includes("ABB");
// false
code.includes("abc");
// false, includes is case sensitive
code.includes("CDE");
// true
As the name suggests, this new method will repeat what we pass in.
let hello = "Hi";
console.log(hello.repeat(10));
// "HiHiHiHiHiHiHiHiHiHi"
This was the third part of my ES6 for beginners course, check out the rest of them here.
You can also read this articles on medium, on my profile.
Thank you for reading.