Scribd
Upload
8 views

JavaScript Template Strings

Uploaded by

Maiwand Mangal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

JavaScript Template Strings

Uploaded by

Maiwand Mangal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C

JavaScript Template Strings


❮ Previous Next ❯

String Templates
Template Strings
Template Literals
Beloved child has many names

Back-Tics Syntax
Template Strings use back-ticks (``) rather than the quotes ("") to define a string:

Example
let text = `Hello World!`;

Try it Yourself »

Quotes Inside Strings


Template Strings allow both single and double quotes inside a string:
 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C
Example
let text = `He's often called "Johnny"`;

Try it Yourself »

Multiline Strings
Template Strings allow multiline strings:

Example
let text =
`The quick
brown fox
jumps over
the lazy dog`;

Try it Yourself »

Interpolation
Template String provide an easy way to interpolate variables and expressions into strings.

The method is called string interpolation.

The syntax is:

${...}
Variable
 Tutorials Substitutions
Exercises  Services   Sign Up Log in

HTML CSS
Template StringsJAVASCRIPT
allow variables inSQL
strings: PYTHON JAVA PHP HOW TO W3.CSS C C++ C

Example

let firstName = "John";


let lastName = "Doe";

let text = `Welcome ${firstName}, ${lastName}!`;

Try it Yourself »

Automatic replacing of variables with real values is called string interpolation.

Expression Substitution
Template Strings allow expressions in strings:

Example
let price = 10;
let VAT = 0.25;

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

Try it Yourself »

Automatic replacing of expressions with real values is called string interpolation.


HTML
 Templates
Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C

Example
let header = "Template Strings";
let tags = ["template strings", "javascript", "es6"];

let html = `<h2>${header}</h2><ul>`;


for (const x of tags) {
html += `<li>${x}</li>`;
}

html += `</ul>`;

Try it Yourself »

Browser Support
Template Strings is an ES6 feature (JavaScript 2015).

ES6 is fully supported in all modern browsers since June 2017:

Chrome 51 Edge 15 Firefox 54 Safari 10 Opera 38

May 2016 Apr 2017 Jun 2017 Sep 2016 Jun 2016

Template Strings is not supported in Internet Explorer.

Complete String Reference


For a complete String reference, go to our:

Complete JavaScript String Reference.


The reference contains descriptions and examples of all string properties and methods.
 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C

❮ Previous Next ❯

W3schools Pathfinder
Track your progress - it's free! Sign Up Log in

COLOR PICKER

 

 SPACES UPGRADE AD-FREE NEWSLETTER

GET CERTIFIED CONTACT US

Top Tutorials Top References


HTML Tutorial HTML Reference
CSS Tutorial CSS Reference
JavaScript Tutorial JavaScript Reference
How To Tutorial SQL Reference

 SQL Tutorial
Tutorials  Exercises 
Python Tutorial
W3.CSS Tutorial
Services  Python Reference

W3.CSS Reference
Bootstrap Reference
Sign Up Log in

HTML
 CSS Bootstrap Tutorial
JAVASCRIPT SQL PYTHON PHP Reference PHP
JAVA HOW TO W3.CSS C C++ C
PHP Tutorial HTML Colors
Java Tutorial Java Reference
C++ Tutorial Angular Reference
jQuery Tutorial jQuery Reference

Top Examples Get Certified


HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
W3.CSS Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate

    

FORUM ABOUT CLASSROOM


W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy
policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.

You might also like