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 priceValue
parameter 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"
Categories: #Javascript Tags: #Javascript #String #String Formatting #Template Literals