Template literals (Template strings) didn't give the exact result in arrow function

es6 template strings html
convert string to template literal javascript
template literals javascript w3schools
template literals not working
tagged template literals
replace string concatenation with template strings
google script template literal
template literals can be reused.

I am following a medium article about javascript es 6 template literals. But it didn't give me the result, but I type the exact code that showed in the article. I think maybe something silly that I had mistaken, but didn't able to find out.

const myFunctn=(name,age)=>{
return 'Hi ${name} , you are ${age} years old';
}
console.log(myFunctn('Said',22));

ok i think the output should have

Hi Said, you are 22 years old

But my output in the chrome browser console is below

Hi ${name} , you are ${age} years old

I had checked that ECMAScript is enabled in my browser, so that is not the issue. Maybe I had make some stupid mistakes.

You need backticks as delimiter for a template literal.

const myFunctn = (name, age) => {
    return `Hi ${name} , you are ${age} years old`;
}

console.log(myFunctn('Said', 22));

ES6 In Depth: Template strings - Mozilla Hacks, ES6 introduces a new kind of string literal syntax called template strings . Did Lopes Gonçalves exhaustively explore the entire Southern  Template Literals were introduced with JavaScript ES2015 (ES6) to handle strings in an easier and more readable way. It allows us to embed expressions (expression interpolation) inside a string declaration, handle multiline strings and create "tagged template literals" which is a more advanced form of template literals.

Template literals are not surrounded by quotes ('), but by backticks (`):

const myFunctn=(name,age)=>{
return `Hi ${name} , you are ${age} years old`;
}
console.log(myFunctn('Said',22));

Template literals (Template strings) didn't give the exact result in , You need backticks as delimiter for a template literal. const myFunctn = (name, age) => { return `Hi ${name} , you are ${age} years old`; }  ES6 Template literals (Template strings) cannot be used inside an Angular component input, because the Angular compiler doesn't know this grammar. This way that you provided is fine. <app-my-component [myInput]="'My name is ' + name + '!'"></app-my-component> Or something like this, In the component,

Use backticks ``. In the case that your arrow function has a single expression as the function body, that expression will be executed, and the resulting value will be implicitly returned when the function is called.

 const myFunctn = (name, age) => `Hi ${name}, you are ${age} years old `;

Browser Compatibility Testing of ES6 Template Literals, Internet Explorer browser version 6 to Internet Explorer browser version 11 doesn​'t supports JAVASCRIPT with ES6 Template Literals (Template Strings) . The template literals, previously also called template strings, are a new way to join strings introduced in ES6. Such strings are enclosed by the back-tick – `` – the grave accent. Template literals can evaluate expressions inserted as a part of the string, enclosed in a dollar sign and curly brackets. const dogName = 'Fluffy';

8. Template literals, Template literals (code): multi-line string literals that support interpolation Compared to using untagged templates for HTML templating, like we did in the  Introduction In this article, we are going to talk about JavaScript Template Literals. They were also called Template Strings prior to the ES2015

Better Strings in JavaScript with Template Literals, Template literals supercharge the way developers work with strings in this new syntax doesn't seem like it changes the string story too much. Template literals is just another way of writing strings that makes use of backticks instead of single quotes '' or double quotes "". It was referred to as template strings prior to ES6. To embed an expression (placeholder) in template literals, we enclose them in a dollar sign and curly braces like this $ {expression}.

ES6 Template Literals, the Handlebars killer?, How viable would it be for the new ES6 Template Literals to replace Handlebars? of Template Literals, is that they have a new syntax inside the string doesn't do anything special, that Template Literals don't already do. Tagged templates are function calls. In the previous example, the method String.raw is called to produce the result of the tagged template.. 8.2 Introduction #. Literals are syntactic constructs that produce values.

Comments
  • use `backticks` not 'single quotes'
  • @George yes! that worked. I have told myself, it will be a silly one ..... Thanks anyway.