ES6 Tutorial
ES6 Functions
ES6 Arrays
ES6 Objects
- es6-objects
- object-destructuring
ES6 Class
- es6-classes
ES6 Strings
- es6-strings
- es6-template-literals
Advance Features
ES6 Miscellaneous
- es5-vs-es6
Interview Questions
- es6-interview-questions

ES6 Template Literals

Template literals are a new feature introduced in ECMAScript 2015/ ES6. It provides an easy way to create multiline strings and perform string interpolation. Template literals are the string literals and allow embedded expressions.

Before ES6, template literals were called as template strings. Unlike quotes in strings, template literals are enclosed by the backtick (` `) character (key below the ESC key in QWERTY keyboard). Template literals can contain placeholders, which are indicated by the dollar sign and curly braces ($(expression}). Inside the backticks, if we want to use an expression, then we can place that expression in the ($(expression}).

Syntax

Multiline strings

In normal strings, we have to use an escape sequence \n to give a new line for creating a multiline string. However, in template literals, there is no need to use \n because string ends only when it gets backtick(`) character.

Let us try to understand it with the following example.

Example

     // Without template literal 
console.log('Without template literal \n multiline string'); 
  
// With template literal 
console.log(`Using template literal
multiline string`);

    

Output

Without template literal
 multiline string
Using template literal
multiline string

String Interpolation

ES6 template literals support string interpolation. Template literals can use the placeholders for string substitution. To embed expressions with normal strings, we have to use the ${} syntax.

Example -1

     var name = 'World';
var cname = 'javaTpoint';
console.log(`Hello, ${name}!
Welcome to ${cname}`);

    

Output

Hello, World!
Welcome to javaTpoint

Let us see another example of string interpolation.

Example-2

     var x = 10;
var y = 20;
console.log(`The product of the variables ${x} and ${y} is:
 ${x*y}`);

    

Output

The product of the variables 10 and 20 is:
200

Tagged templates

Tagged templates are one of the more advanced form of template literals. Tagged template literals allow us to parse template literals with a function.

The first argument of the tag function contains an array having string values, and the remaining arguments are related to the expression. The writing of tagged literal is similar to the function definition, but the difference occurs when the tagged literals get called. There are no parentheses () required to call a literal.

Let us see the illustration for the tagged templates.

Example-1

     function TaggedLiteral(str) { 
    console.log(str); 
} 
  
TaggedLiteral `Hello World`;

Output

[ 'Hello World' ]

Example-2

We can also pass the values in a tagged literal. The value can be the result of some expression or the value fetched from the variable. We can see the illustration for the same in the following code:

     function TaggedLiteral(str, val1, val2) { 
    console.log(str); 
    console.log(val1+"    "+val2); 
} 
  
let text = 'Hello World'; 
TaggedLiteral`Colors ${text} ${10+30}`;

    

Output

[ 'Colors ', ' ', '' ]
Hello World    40

Raw Strings

The template literal raw method allows the accessing of raw strings as they were entered. In addition to this, the string.raw() method exists for creating the raw strings as similar to the default template function. It allows us to write the backslashes as we would in a regular expression literal.

The string.raw() method is used to show the strings without any interpretation of backslashed characters. It is also useful to print windows sub-directory locations without require to use a lot of backslashes.

Example

     var rawText = String.raw`Hello \n World \n Welcome back! ` 
console.log(rawText)

Output

Hello \n World \n Welcome back!

String.fromCodePoint()

This method returns a string, which is created by using the specified sequence of Unicode code points. It throws a RangeError if there is an invalid code point is passed.

Example

     console.log(String.fromCodePoint(49))        
console.log(String.fromCodePoint(80, 76))

Output

1
PL

Next TopicES6 Events

← prev next →

Hot Tutorials

HTML/CSS

JavaScript

Backend language

Development Framework

Database

Mobile development

Development tools

Big Data

XML Tutorial

Contact US

Email:jjw.quan@gmail.com

ES6 Tutorial

ES6 Functions

ES6 Arrays

ES6 Objects

ES6 Class

ES6 Strings

Advance Features

ES6 Miscellaneous

Interview Questions

ES6 Template Literals

Multiline strings

String Interpolation

Tagged templates

Raw Strings

String.fromCodePoint()

Hot Tutorials

Python tutorial

Vue.js Tutorial

HTML Tutorial

Java Tutorial

PHP Tutorial

Spring Tutorial

JavaScript Tutorial

CSS Tutorial

jQuery Tutorial

SQL Tutorial

C Tutorial

HTML/CSS

HTML Tutorial

HTML5 Tutorial

CSS Tutorial

Bootstrap Tutorial

JavaScript

JavaScript Tutorial

Vue.js Tutorial

ReactJS Tutorial

jQuery Tutorial

Node.js Tutorial

TypeScript Tutorial

AngularJS Tutorial

JSON Tutorial

Ajax Tutorial

ES6 Tutorial

Angular 7 Tutorial

jQuery UI Tutorial

Backend language

Python tutorial

Java Tutorial

Node.js Tutorial

PHP Tutorial

Go Tutorial

C Tutorial

C++ Tutorial

C# Tutorial

Ruby Tutorial

JSP Tutorial

JSTL Tutorial

ASP.NET Tutorial

Perl Tutorial

Scala Tutorial

VBA Tutorial

Development Framework

Spring Tutorial

Spring Boot Tutorial

Django Tutorial

Servlet Tutorial

Struts 2 Tutorial

Hibernate Tutorial

Solr Tutorial

Database

SQL Tutorial

MySQL Tutorial

Oracle Tutorial

SQL Server Tutorial

PostgreSQL Tutorial

DB2 Tutorial

Redis Tutorial

SQLite Tutorial

MongoDB Tutorial

Memcached Tutorial