Teachnique
      CourseRoadmaps
      Login

      OverviewPlacementSyntaxHello WorldConsole.log()CommentsVariableslet StatementConstantsData TypesType ConversionsStrict ModeReserved Keywords

      OperatorsArithmetic OperatorsComparison OperatorsLogical OperatorsBitwise OperatorsAssignment OperatorsConditional Operatorstypeof OperatorNullish Coalescing OperatorDelete OperatorComma OperatorGrouping OperatorYield OperatorSpread OperatorExponentiation OperatorOperator Precedence

      If...ElseWhile LoopsFor LoopFor...in LoopFor...of LoopLoop ControlBreak StatementContinue StatementSwitch CaseUser Defined Iterators

      FunctionsFunction ExpressionsFunction ParametersDefault ParametersFunction() ConstructorFunction HoistingArrow FunctionsFunction InvocationFunction call() MethodFunction apply() MethodFunction bind() MethodClosuresVariable ScopeGlobal VariablesSmart Function Parameters

      NumberBooleanStringsArraysDateMathRegExpSymbolSetsWeakSetMapsWeakMapIterablesReflectTypedArrayTempate LiteralsTagged Templates

      Objects OverviewClassesObject PropertiesObject MethodsStatic MethodsDisplay ObjectsObject AccessorsObject ConstructorsNative PrototypesES5 Object MethodsEncapsulationInheritanceAbstractionPolymorphismDestructuring AssignmentObject DestructuringArray DestructuringNested DestructuringOptional ChainingGlobal ObjectMixinsProxies

      HistoryVersionsES5ES6ECMAScript 2016ECMAScript 2017ECMAScript 2018ECMAScript 2019ECMAScript 2020ECMAScript 2021ECMAScript 2022

      CookiesCookie AttributesDeleting Cookies

      Browser Object ModelWindow ObjectDocument ObjectScreen ObjectHistory ObjectNavigator ObjectLocation ObjectConsole Object

      Web APIHistory APIStorage APIForms APIWorker APIFetch APIGeolocation API

      EventsDOM Events

      Feedback

      Submit request if you have any questions.

      Course
      Tempate Literals

      JavaScript Tutorial

      This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

      Tempate Literals

      JavaScript Tempate Literals

      In JavaScript, the template literals are introduced in ES6 to customize the string dynamically. The template literals allow you to add variables or expressions into the string, and the string changes according to the variables and expression value changes.
      There are multiple synonyms words used for the template literal words. For example, template string, string templates, back-tics syntax, etc.

      Syntax

      Follow the syntax below to use the template literals in JavaScript.
      let str = `Hi ${name}`;
      You need to write a string between back-tics (``). For using the dynamic variable or expression with a string, you need to place it between the ${}.
      Furthermore, using the template literals, you don’t need escape characters to add single or double quotes in the string.

      Examples

      Example: Creating Strings with Template Literals

      In the example below, we used the template literals to create a string with special characters.
      The str1 string is the same as the regular string we create using single or double quotes. The str2 string contains the single quotes with the string. Here, you can see that we haven’t used the escape characters to add a single quote in the string.
      <html>
      <body>
         <div id = "output1"> </div>
         <div id = "output2"> </div>
         <script>
            let str1 = `Hello Users!`;
            let str2 = `'Tutorialspoint' is a good website`;
            document.getElementById("output1").innerHTML = str1;
            document.getElementById("output2").innerHTML = str2;
         </script>
      </body>
      </html>

      Output

      Hello Users!
      'Tutorialspoint' is a good website

      Example: Variables with Template Literals

      The below code demonstrates to use the dynamic values in the string by passing the variables into the template literal string.
      Here, we have defined the variables related to cars. After that, we create a string using the template literals and add the variables.
      In the output, you can see that variables are replaced with their value in the string.
      <html>
      <body>
         <p id = "output"> </p>
         <script>
            let car = "BMW";
            let model = "X5";
            const price = 5000000;
            const carStr = `The price of the ${car} ${model} is ${price}.`;
            document.getElementById("output").innerHTML = carStr;
         </script>
      </body>
      </html>

      Output

      The price of the BMW X5 is 5000000.

      Example: Expressions with Template Literals

      You can also add the expressions to the string using the template literals.
      In the str1 string, we added the expression to perform the summation of two numbers in the template literals string.
      In str2, we invoke the function invocation as an expression. It replaces the expression with a returned value from the function.
      <html>
      <body>
         <div id = "output1"> </div>
         <div id = "output2"> </div>
         <script>
            function func() {
               return 10;
            }
             
            const str1 = `The sum of 2 and 3 is ${2 + 3}.`;
            const str2 = `The return value from the function is ${func()}`;
            
            document.getElementById("output1").innerHTML = str1;
            document.getElementById("output2").innerHTML = str2;
         </script>
      </body>
      </html>

      Output

      The sum of 2 and 3 is 5.
      The return value from the function is 10

      JavaScript Nested Template Literals

      JavaScript allows you to use the template literals inside other template literals, and it is called the nested template literals.

      Example

      In the example below, we added the expression in the outer template literal. The expression contains the ternary operator. It checks whether the 2 is less than 3. Based on the returned boolean value, it executes the first or second nested expression and prints the result.
      <html>
      <head>
         <title>Nested Template Literals</title>
      </head>
      <body>
         <p id = "output"> </p>
         <script>
            const nested = `The subtraction result is: ${2 < 3 ? `${3 - 2}` : `${2 - 3}`}`;
            document.getElementById("output").innerHTML = nested;
      </script>
      </body>
      </html>

      Output

      The subtraction result is: 1

      Example: Multiline String Using Template Literal

      You can also use the template literals to define the multiline string.
      <html>
      <body>
         <div id = "output"> </div>
         <script>
            function func() {
               return 10;
            }
            
            const str1 = `The sum of 2 and 3 is ${2 + 3}. <br>
            The return value from the function is ${func()}`;
            
            document.getElementById("output").innerHTML = str1;
         </script>
      </body>
      </html>

      Output

      The sum of 2 and 3 is 5.
      The return value from the function is 10