Introduction to TypeScript String Interpolation
TypeScript String Interpolation is an expression used to evaluate string literals that contain one or more expressions. String Interpolation evaluates the expressions and obtains the result in a string, which is then replaced in the original string. In TypeScript, template strings are of 3 fold, i.e. String Interpolation, Multiline Strings, and Tagged Templates. String Interpolation had fallen backstep with other names as Dependency Injection, which apparently came up as Template literals in ES 6. A common use of String Interpolation is when the user wants to generate some string out of static string and variables, which require templating logic, and that is how template strings come into the picture. Let us get into the syntax and its implementation.
Syntax:
There is no particular syntax for String Interpolation, but we need to use strings that use backticks, i.e. ` instead of single quote ‘ or double quotes “ enclosed with placeholders as ${ }
Let us see an example of how this backtick is used.
Consider employeeName as the string expression. Evaluated beforehand and the resulting value “Karthik Kumar” is replaced as in the final string.
This particular string interpolation works only in ES6/ ES5 and above.
let employeeName:string = "Karthik Kumar";
console.log(`${employeeName} is one of the most valuable Employee`)
Here, we are using the backticks for the output log to print. Previously we used to put them in single quotes or double quotes.
At runtime, code replaces the placeholders with real values
How to Perform String Interpolation in TypeScript
Let us see few examples of How to Perform String Interpolation in TypeScript
Example #1
A basic example of TypeScript String Interpolation
let employeeName: string = "Karthik Kumar";
console.log(`${employeeName} is one of the most valuable Employee`)
Output:
Here, we are using a single expression in the resulting string. $ { }, dollar with enclosed flower brackets will read the variable and is sent to the resulting string.
TypeScript String Interpolation with Multiple Expressions,
Interpolation of more than one expression at a time leads to Multiple Interpolations. In the below example, we shall pass three expressions for interpolation and then display them on to the resulting string.
Example #2
A basic example of TypeScript String Interpolation with Multiple Expressions
const empName: String = 'Lokesh';
const empExp: number = 15;
const empPrd: String = 'RCL';
let empVal: string = `Employee ${ empName } has experience of ${ empExp } years in domain ${ empPrd }`;
console.log('Valuable Employee:',empVal);
Output:
Here, ${ }, dollar with enclosed flower brackets will read the const values and is sent to the resulting string.
TypeScript String Interpolation using Expressions.
Interpolation of Expressions like Arithmetic expressions, Ternary operator can also be done using String Interpolation.
Example #3
String Interpolation for Arithmetic Expressions
let numA=102
let numB=202
let numC=302
let addABC=`${numA+numB+numC}`
console.log(`The addition of ${numA} + ${numB} + ${numC} is ${addABC}`);
Output:
So here we are interpolating the Arithmetic expression of numA, numB and numC.
Example #4
String Interpolation using Ternary operator in the Template string.
let numX = 350;
console.log(`The numX value is ${(numX==350) ?'Three Hundred and Fifty':'Forty five'}`);
Output:
Here, we are using the Ternary operator to check the expression’s value and interpolate it in the console.
TypeScript String Interpolation for Nested Expressions,
As we had seen above in example 3, interpolation was applied to arithmetic expressions. Interpolation can also be applied to Nested expressions like `${a+b}`.
Example #5
String Interpolation for Nested Expressions
let numA=2
let numB=4
let numC=6
let mulABC=`${numA*numB*numC}`
console.log(`The Multiplication of ${numA} * ${numB} * ${numC} is ${mulABC}`);
Output:
So mulABC in the console log is nested with 3 other expressions numA, numB and numC.
Example #6
String Interpolation with string methods.
let stuName1 = 'Helen';
let stuName2 = 'Hari';
console.log(`Student ${stuName1.toUpperCase()} is taller than ${stuName2.toLowerCase()}`);
Output:
So here, string methods can also use string Interpolation.
Example #7
String Interpolation for functions
function squareArea(length: number, breadth: number): number {
return length * breadth;
}
console.log(`Area of the square is ${squareArea(2,4)}`);
Output:
Interpolation can also be applied to functions, as shown above.
Rules and Regulations for TypeScript String Interpolation
- String Interpolation replaces the placeholders with values of string literals of any type.
- As these are very useful in the modern programming language, in TypeScript, they are enclosed using backticks “ which denotes the string’s start and end.
- Backticks are called Template literals and defined as String literals that have expressions embedded.
- String Interpolation is also known as Templating.
- It is better to use intermediate variables to hold the complex expressions before sending them to the placeholder.
- Interpolation’s main usage is to use template strings that are created for building strings with static and variable parts.
Conclusion
With this, we shall conclude the topic ‘TypeScript String Interpolation’. We have seen what String Interpolation is and how is it displayed using the backticks enclosed in flower brackets. The template string wraps a sequence of characters into a pair of backticks. Interpolation has a future as it helps in inserting the values to string literals in a readable format. If, in case, template strings use complex expressions, it is better to have intermediate variables to hold the expressions before sending them to the placeholders. Examples solved here have covered all the concepts using string interpolation.
Recommended Articles
This is a guide to TypeScript string interpolation. Here we discuss How to Perform String Interpolation in TypeScript along with the examples and outputs. You may also have a look at the following articles to learn more –
