String upgrades in Javascript

Alacritic
String upgrades in Javascript
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"

Thanks for reading. You can also visit myzigyasa for informative articles.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade