ES6 - New String Methods

Following is a pst of methods with their description.

Template Literals

Template pterals are string pterals that allow embedded expressions. Templatestrings use back-ticks (``) rather than the single or double quotes. A template string could thus be written as −

var greeting = `Hello World!`; 

String Interpolation and Template pterals

Template strings can use placeholders for string substitution using the ${ } syntax, as demonstrated.

Example 1

var name = "Brendan"; 
console.log( Hello, ${name}! );

The following output is displayed on successful execution of the above code.

Hello, Brendan!

Example 2: Template pterals and expressions

var a = 10; 
var b = 10; 
console.log(`The sum of ${a} and ${b} is  ${a+b} `);

The following output is displayed on successful execution of the above code.

The sum of 10 and 10 is 20 

Example 3: Template pterals and function expression

function fn() { return "Hello World"; } 
console.log(`Message: ${fn()} !!`);

The following output is displayed on successful execution of the above code.

Message: Hello World !!

Multipne Strings and Template Literals

Template strings can contain multiple pnes.

Example

var multiLine = `
   This is 
   a string 
   with multiple 
   pnes`; 
console.log(multiLine)

The following output is displayed on successful execution of the above code.

This is 
a string 
with multiple 
pne

String.raw()

ES6 includes the tag function String.raw for raw strings, where backslashes have no special meaning. String.raw enables us to write the backslash as we would in a regular expression pteral. Consider the following example.

var text =`Hello 
 World` 
console.log(text)  

var raw_text = String.raw`Hello 
 World ` 
console.log(raw_text)

The following output is displayed on successful execution of the above code.

Hello 
World 
Hello 
 World

Tagged Templates

A tag is a function which can interpret and process a template pteral. A tag appears in front of the template pteral. Syntax is shown below.

Syntax

let output_fromTag = tagFunction `Template pteral with ${variable1} , ${variable2}`

The tag function implementation syntax is as given below −

function tagFunction(pterals,...variable_values){
   //process
   return "some result"
}

Example

Following Example defines a tag function myTagFn(). It displays the parameters passed to it. After displaying it returns Done to the caller.

<script>
   function myTagFn(pterals,...values){
      console.log("pteral values are");
      for(let c of pterals){
         console.log(c)
      }

      console.log("variable values are ");
      for(let c of values){
         console.log(c)
      }

      return "Done"
   }
   let company = `TutorialsPoint`
   let company_location = `Mumbai`
   let result = myTagFn `Hello this is ${company} from ${company_location}`

   console.log(result)

</script>

The output of the above code will be as stated below −

//pteral
pteral values are
Hello this is
from
//values
variable values are
TutorialsPoint
Mumbai
Done

Example

The below tag function takes a template pteral and converts it to upper case as shown below −

<script>
   function convertToUpperTagFn(pterals, ...values) {
      let result = "";
      for (let i = 0; i < pterals.length; i++) {
         result += pterals[i];
         if (i < values.length) {
            result += values[i];
         }
      }
      return result.toUpperCase();
   }
   let company = `TutorialsPoint`
   let company_location = `Mumbai`
   let result = convertToUpperTagFn `Hello this is ${company} from ${company_location}`

   console.log(result)

</script>

The output of the above code will be as mentioned below −

HELLO THIS IS TUTORIALSPOINT FROM MUMBAI

String.fromCodePoint()

The static String.fromCodePoint() method returns a string created by using the specified sequence of unicode code points. The function throws a RangeError if an invapd code point is passed.

console.log(String.fromCodePoint(42))        
console.log(String.fromCodePoint(65, 90))

The following output is displayed on successful execution of the above code.

* 
AZ