Skip to content
codingtube

codingtube

Coding and Programming tutorials

  • javascript
  • React
  • ES6
  • React js
  • coding
  • ffmpeg
  • java
  • programming
  • information
  • coding
  • Privacy Policy
  • Twitter trends
  • Age Calculatore
  • Codingtube Community
  • YouTube Tags Generator
  • About
  • Toggle search form

What is Template Strings in javascript ES6 ?

Posted on June 2, 2021December 2, 2021 By christo No Comments on What is Template Strings in javascript ES6 ?

Template Strings in ES6 provide us with an alternative to string concatenation. They also
allow us to insert variables into a string. that’s make quite easy for String Concatenation in ES6

But with a Template Strings, we can create one string and insert the variable values by surrounding them with ${ }:

Example of Traditional Strings Concatenation:

console.log(lastName + “, ” + firstName + ” ” + middleName )

Example of Concatenation with Template Strings in ES6

console.log(`${lastName}, ${firstName} ${middleName}`)

Table of Contents

  • Default parameters in ES6 ?
  • What is Transpiling ES6 ?

Default parameters in ES6 ?

ES6 also provides default parameters if there is no argument

Syntax:

function functionname(param1 = defaultValueone, ..., nthpara = nth defult value) { ... }

Example:

function Sun(a, b = 10) {
  return a + b
}

multiply(10, 2)          // output will be 12
multiply(10)             // output will be 20
multiply(10, undefined)  // output will be 20

What is Transpiling ES6 ?

Through Transpiling ES6 we can easily convert ES6 to ES5

currently most of the browser support ES6. but if does not support then Transpiling ES6 is used to convert ES6 to ES5

Example of ES6 to ES5

const add = (x=5, y=10) => console.log(x+y);

Convert ES6 to ES5 through Transpiling ES6

Transpiling ES6 code of Arrow add function

"use strict";
var add = function add() {
 var x = arguments.length <= 0 || arguments[0] === undefined ?
 5 : arguments[0];
 var y = arguments.length <= 1 || arguments[1] === undefined ?
 10 : arguments[1];
 return console.log(x + y);
};

In the above example the transpiler added a “use strict” declaration to run in strict mode. The variables x
and y are defaulted using the arguments array, a technique you may be familiar with.

we can transpile JavaScript directly in the browser using the inline Babel transpiler.
we just have to include the browser.js file, and any other scripts with type=”text/babel” will be converted (even though Babel 6 is the current version of Babel, only the CDN for
Babel 5 will work)

Example

<script 
 src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js">
</script>
<script src="script.js" type="text/babel">
</script>

coding, javascript Tags:defualt parameters, ES6, Template string, transpiler

Post navigation

Previous Post: What is Sass and How to use in React ?
Next Post: What is Destructuring Assignment in javascript ES6 ?

Related Posts

Abstract class in Java coding
What is Promises in javascript ? javascript
What is Pure function in javascript ES6 ? javascript
What is Immutability in javascript Functional Concepts ? javascript
What is Higher-Order Functions in functional programming of javascript ? javascript
What is The Spread Operator in javascript ES6 ? javascript

Leave a Reply Cancel reply

You must be logged in to post a comment.

Recent Posts

  • Affiliate Marketing Principles
  • The Basics You Need to Know About Affiliate Marketing
  • Affiliate Marketing Options
  • All About Affiliate Marketing
  • Classification of Database Management Systems
  • Three-Tier and n-Tier Architectures
    for Web Applications
  • Two-Tier Client/Server Architectures for DBMSs
  • Basic Client/Server Architectures in DBMS
  • Centralized DBMSs Architecture in DBMS
  • Tools, Application Environments, and Communications Facilities in DBMS

Categories

  • Affiliate marketing (5)
  • Algorithm (43)
  • amp (3)
  • android (223)
  • Android App (8)
  • Android app review (4)
  • android tutorial (60)
  • Artificial intelligence (61)
  • AWS (3)
  • bitcoin (8)
  • blockchain (1)
  • c (5)
  • c language (105)
  • cloud computing (4)
  • coding (4)
  • coding app (4)
  • complex number (1)
  • Computer Graphics (66)
  • data compression (65)
  • data structure (188)
  • DBMS (44)
  • digital marketing (9)
  • distributed systems (11)
  • ffmpeg (26)
  • game (3)
  • html (6)
  • image processing (35)
  • Inequalities (1)
  • information (4)
  • java (212)
  • java network (1)
  • javascript (9)
  • kotlin (4)
  • leetcode (1)
  • math (21)
  • maven (1)
  • mysql (1)
  • Node.js (8)
  • operating system (109)
  • php (310)
  • Principle Of Mathematical Induction (1)
  • programming (6)
  • Python (4)
  • Python data structure (9)
  • React native (1)
  • React.js (22)
  • Redux (1)
  • seo (4)
  • set (12)
  • trigonometry (6)
  • vue.js (35)
  • XML (3)

sitemap

sitemap of videos

sitemap of webstories

sitemap of website

  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy
  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy

© codingtube.tech