e v m

String Literal

String literal is any value that is inside '' or "". In Javascript you can use them both, this allows you to write strings where "Emil's blog" is valid.

You could also write it as 'Emil\'s blog'. \ is known as the escape character. By using it you are telling javascript, do not treat it as you would usually do, escape its responsiblity and treat it as any other character.

So in 'Emil\'s blog', if we did not use the escape character as soon as the second is ' is encountered, 'Emil's blog', javascript closes the string. This will cause our program to throw an error, as the s blog now is invalid javascript syntax as it is outside the string literal. Afterwards there is another ', which is not closed. So all the code following an unclosed ' will be treated as a string.

Rule of thumb is string literals come in matching '' or "". In strings, a beginning must always have an end.

In order to add a variable in between

1
const name = 'Emil'
2
console.log(name + '\'s blog')
3
// we escape the ' character inside '' with \'

You must combine the strings together by using string concatination. It is a computer science term for combining two different variables of the same type (arrays, strings).

String Template Literal

Operations with String Literals are very unintuitive. There are a lot of pieces you need to keep in mind. And is error prone. String template literals make the string literals more readable and reasonable. Here is how we would do the same thing.

1
const name = 'Emil';
2
console.log(`${name}'s blog`);

By just reading it you can guess what it is doing. ` the backtick opens and closes the string template literal and inside we can use javascript expressions. Think of string template literals as the superset of template literals, they can do everything a string literal can do and more.

1
const a = 5;
2
const b = 10;
3
console.log(`a plus b is ${a + b}.`); // a plus b is 15.
4
console.log('a plus b is ' + a + b + '.'); // a plus b is 510.
5
console.log('a plus b is ' + (a + b) + '.'); // a plus b is 15.

Above is another pain point of string literals. Coercion is javascript engine’s attempt to turn your code into a runnable executable. So when you try to concatinate a string with a number, Javacript does not throw an error, but tries to guess what we are trying to do. So it assumes we want to add the number value into the string.

1
console.log('1' + 34); // '134'

So when we do addition with a string with a number with another addition with a number

1
console.log('a plus b is ' + a + b + '.');

From left to right it just adds the numbers into the string as string values.

String template literals on the other hand are explicit about what will return exactly.

1
console.log(`a plus b is ${a + b}.`);

Above we know only after a + b operation is done and returns a value we are going to include it in the string.

In order to perform the number addition operation first we can use braces.

1
console.log('a plus b is ' + (a + b) + '.'); // a plus b is 15.

Written by Emil Martinov who lives Rotterdam || Istanbul and loves everything js. He tweets mostly about js.