Borislav Hadzhiev
Thu Feb 17 2022·3 min read
Photo by Nick Karvounis
Use a template literal to interpolate variables in a string in TypeScript,
e.g. hello ${myVariable}
. Template literals are delimited with backticks and
allow us to embed variables and expressions using the dollar sign and curly
braces ${expression}
syntax.
const str = 'Alfred'; // 👇️ const result: string const result = `Hello ${str}!`; // 👇️ "Hello Alfred!" console.log(result);
We used a template literal to interpolate a variable in a string.
TypeScript is able to infer the type of a template literal to be a string, because that's what it is - a string that allows us to embed variables and expressions.
The dollar sign and curly braces syntax allows us to use placeholders that get evaluated.
const num = 10; // 👇️ const result: string const result = `${num + 23} percent`; console.log(result); // 👉️ "33 percent"
By default, the template literal concatenates the parts into a string.
Any expression that gets passed using the dollar sign and curly braces ${}
syntax gets evaluated.
// 👇️ const result: string const result = `10 multiplied by 5 is ${10 * 5}`; console.log(result); // 👉️ "10 multiplied by 5 is 50"
You can also interpolate variables in multi-line strings using a template literal.
const str1 = 'line 1'; const str2 = 'line 2'; const result = `this is ${str1} this is ${str2}`; console.log(result); // 👉️ this is line 1 // 👉️ this is line 2
This is very useful, because we don't have to add a newline character on each line, as opposed to when concatenating strings.
const str1 = 'line 1'; const str2 = 'line 2'; const result = 'this is ' + str1 + '\n' + 'this is ' + str2; console.log(result); // 👉️ this is line 1 // 👉️ this is line 2
Since template literals are enclosed in backticks ``, if your string contains a backtick character, you have to escape it using a backslash.
const str1 = 'hello'; const str2 = 'world'; const result = `${str1}\`${str2}`; console.log(result); // 👉️ hello`world
You can even call functions in template literals.
function multiply(a: number, b: number): number { return a * b; } const result = `10 * 5 is equal to ${multiply(10, 5)}`; console.log(result); // 👉️ "10 * 5 is equal to 50"
The dollar sign curly braces syntax is very powerful when you have to incorporate logic when interpolating a variable in a string.
Here's an example of using the ternary operator with template literals.
const str1 = 'world'; const str2 = 'one'; // 👇️ const result: string const result = `${str1.length > str2.length ? str1 : str2}`; console.log(result); // 👉️ "world"
The ternary operator is basically an if/else
statement. The part before the
question mark gets evaluated and if it returns true
, it returns the value
before the colon, otherwise it returns the value after the colon.
You can also use the logical OR (||) and logical AND (&&) operators in a template literal.
const num1 = 0; const num2 = 50; // 👇️ const result: string const result = `${num1 || num2}`; console.log(result); // 👉️ '50'
The logical OR (||) operator returns the value to the left if it's truthy, otherwise it returns the value to the right.
Here's an example of using the logical AND (&&) operator with template literals.
const str1 = 'hello'; const str2 = 'world'; const result = `${str1 && str2}`; console.log(result); // 👉️ "world"
The logical AND (&&) operator returns the value to the left if it's falsy, otherwise it returns the value to the right.
These are the most common ways to interpolate a variable or expression in a string. You can incorporate function calls and all sorts of logic when using template literals.