String upgrades in Javascript

The String the global object is a constructor for strings or a sequence of characters.

Template Literals

A common task in any programming language is to concatenate and format strings. You have probably found yourself writing code similar to the following many times:

var greeting = "Hi " + name;

Template Literals provide a more succinct and readable form allowing us to specify values to be replaced within the string by surrounding it with curly braces and a dollar sign.

Note how the string itself is also enclosed with the backtick characters instead of ' or "":

var name = "MyZigyasa";
var greeting = `Hello ${name}`;
// "Hello MyZigyasa"

We can also use template literals to spread our declaration across multiple lines:

var name = "User";
var greeting = `Hello ${name}
Line 1
Line 2`;

/*
"Hello User"
Line 1
Line 2"
*/

We can even use expressions within placeholders:

var x = 1;
var y = 2;
var test = `Hello ${x + y}`;

// Hello 3

Note if for some reason you wanted to use a backtick in your expression this can be done by escaping it with a backslash e.g.

var greeting = `Hello \``;

For more advanced templating you can use Tagged Template Literals, which allow you to define a function that does multiple processing steps in order to produce a string. Our template becomes a function, rather than a simple string, allowing us to abstract the templating process.

let price = 5;

function currency(strings, priceValue){
  const str0 = strings[0]; // $ or €
  const str1 = strings[1]; //.00

  let currencyName = '';
  if (str0.indexOf('$') !== -1) {
    currencyName = ' USD';
  } else if (str0.indexOf('€') !== -1) {
    currencyName = ' EUR';
  }
  return str0 + priceValue +
    str1 + currencyName;
}

console.log(currency`$${price}.00`)
// $5.00 USD
console.log(currency`€${price}.00`)
// €5.00 EUR

The strings the parameter is an array of the normal strings that are placed in-between the substitutions. The priceValueparameter receives the value passed into the first template literal substitution in the string to be interpolated.

Subsequent values appear as additional arguments, a best practice is to use the rest operator to map values to an array rather than define each argument:

function price(strings, ...substitution){
 ...
}

String Extensions

ES6 expands on existing primitives to fix some long-time issues and add useful functionality.

In previous versions of EcmaScript if you wanted to use Unicode characters one method was to use String.fromCharCode:

String.fromCharCode(65); // A

However, fromCharCode doesn’t work with all possible Unicode values but only ranging from 1 to 65535 (0xFFFF). The greater number used as input will be truncated automatically.

String.fromCharCode(0x2014) // —
String.fromCharCode(0x12014) // -
// the first 1 is truncated

ES6 introduces a new method of fromCodePoint that can be used to work with all Unicode values up to 21 bits:

String.fromCodePoint(65); // A
String.fromCodePoint(65,66,67); // ABC
String.fromCodePoint(0x12014) // 𒀔

Internationalization & Localization

Collator is an object that provides locale-specific string comparisons. It's aware of Unicode.

To sort through a list of letters in two different languages:

var list = [ "ä", "a", "z" ];
var i10nDE = new Intl.Collator("de");
var i10nSV = new Intl.Collator("sv");

In German, ä sorts with a. In Swedish, ä sorts after z.

i10nDE.compare("ä", "z") === -1;
i10nSV.compare("ä", "z") === +1;

console.log(list.sort(i10nDE.compare));
// [ "a", "ä", "z" ]
console.log(list.sort(i10nSV.compare));
// [ "a", "z", "ä" ]

Unicode in ES6

JavaScript strings are represented using UTF-16 code units. Each code unit can be used to represent a code point in the [U+0000, U+FFFF] range. Code points beyond that range are represented by a surrogate pair.

In ES6 the notation has been simplified:

\\ represents U+1F332 (EVERGREEN TREE)
"\u{1F332}"=="🌲"=="\uD83C\uDF32"

As with ES5, having multiple code units per code point means that .length is not reliable:

'🌲🌲🌲'.length // length is 6

However in ES6 the string iterator can be used to loop over code points rather than code units:

for (let codePoint of '🌲✈❤') {
  console.log(codePoint);
}
// '🌲'
// '✈'
// '❤'

Use .codePointAt to get the base-10 numeric representation of a code point at a given position in a string (indexed by code unit).

for (let codePoint of '🌲✈❤') {
  console.log(codePoint.codePointAt(0));
}
/*
127794 (EVERGREEN TREE)
9992 (AIRPLANE)
10084 (HEAVY BLACK HEART)
*/

String.raw

String.raw is used to work with template strings and is best explained with an example:

In JavaScript, \n is used to indicate a new line.

Consider if we had the following template literal:

`Line1\nLine2!`;

When output this would be interpreted as below as \n signifies a new line:

"Line1
Line2"

However, sometimes it is desirable to work with a string template in its raw format - String.raw allows you to do this - note how there is no newline between Line1 and Line2 now just \n:

String.raw`Line1\nLine2`;
// "Line1\nLine2"