Extension methods for strings

Unicode Representation Extension for Strings

ES6 enhances support for Unicode by allowing the use of the \u{xxxx} format to represent a character, where xxxx denotes the Unicode code point of the character. This representation correctly identifies characters with code points greater than 0xFFFF.

// ES5 cannot correctly identify characters greater than 0xFFFF
'\uD842\uDFB7' // "𠮷"
'\u20BB7'      // " 7" (parsed as \u20BB+7)

// ES6 representation
'\u{20BB7}'    // "𠮷"
'\u{41}\u{42}' // "AB"

String Iterator Interface

ES6 adds an iterator interface (Symbol.iterator) to strings, enabling them to be traversed by for...of loops. The key advantage of this interface is its ability to correctly identify code points greater than 0xFFFF.

const text = '𠮷a';

// ES5 approach incorrectly identifies characters
for (let i = 0; i < text.length; i++) {
  console.log(text[i]); 
}
// Output: '�' '�' 'a'

// ES6 approach correctly identifies characters
for (const char of text) {
  console.log(char);
}
// Output: '𠮷' 'a'

Template Strings

Template strings are enhanced strings delimited by backticks (`). They can be used as regular strings, to define multi-line strings, or to embed variables within strings.

// Multi-line string
const multiLine = `
  This is 
  a multi-line
  string.
`;

// String interpolation
const name = 'Bob';
const age = 25;
console.log(`Hello, my name is ${name} and I'm ${age} years old.`);

// Expression evaluation
const a = 5;
const b = 10;
console.log(`The result is ${a + b}`);

// Nested templates
const isLarge = true;
console.log(`Item count: ${isLarge ? `many` : `few`}`);

New String Methods

includes(), startsWith(), endsWith()

These methods return a boolean indicating whether the parameter string was found:

• includes(): Whether the string contains the parameter
• startsWith(): Whether the string starts with the parameter
• endsWith(): Whether the string ends with the parameter

const s = 'Hello world!';

s.includes('world')   // true
s.startsWith('Hello') // true
s.endsWith('!')       // true

// Supports a second parameter indicating the starting position for the search
s.includes('Hello', 1)   // false
s.startsWith('world', 6) // true
s.endsWith('Hello', 5)   // true

repeat()

The repeat method returns a new string representing the original string repeated n times.

'x'.repeat(3)      // "xxx"
'hello'.repeat(2)  // "hellohello"
'na'.repeat(0)     // ""

// If the parameter is a decimal, it is rounded down
'na'.repeat(2.9)   // "nana"

// The parameter cannot be negative or Infinity
'na'.repeat(-1)    // RangeError

padStart(), padEnd()

These methods are used to pad strings to a specified length. padStart() pads at the beginning, while padEnd() pads at the end.

'x'.padStart(5, 'ab')   // 'ababx'
'x'.padEnd(5, 'ab')     // 'xabab'

// If the original string length is equal to or greater than the maximum length, the original string is returned
'xxx'.padStart(2, 'ab')  // 'xxx'

// Omitting the second parameter pads with spaces by default
'x'.padStart(4)         // '   x'

// Common use case: padding numbers to a fixed length
'12'.padStart(10, '0')  // '0000000012'

trimStart(), trimEnd()

These methods remove whitespace from the beginning and end of a string, respectively, returning a new string without modifying the original.

const s = '  abc  ';

s.trimStart()   // "abc  "
s.trimEnd()     // "  abc"

// Browsers also implement trimLeft() and trimRight() as aliases

matchAll()

The matchAll() method returns an iterator of all matches of a regular expression against the current string.

const regexp = /t(e)(st(\d?))/g;
const str = 'test1test2';

const array = [...str.matchAll(regexp)];
console.log(array[0]);  // ["test1", "e", "st1", "1"]
console.log(array[1]);  // ["test2", "e", "st2", "2"]

Destructuring Assignment for Strings

Strings can also be destructured because they are converted into an array-like object.

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

// Array-like objects have a length property
let {length : len} = 'hello';
len // 5

Tagged Templates

Tagged templates are a special form of function call. The "tag" refers to the function, and the template string that follows is its argument.

function tag(strings, ...values) {
  console.log(strings);  // ["Hello ", " world ", ""]
  console.log(values);   // [15, 50]
}

const age = 15;
const score = 50;
tag`Hello ${age} world ${score}`;

// Practical application: Filtering HTML strings to prevent malicious user input
function safeHtml(strings, ...values) {
  let result = strings[0];
  for (let i = 0; i < values.length; i++) {
    let value = String(values[i])
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;");
    result += value + strings[i + 1];
  }
  return result;
}

const message = safeHtml`<p>${userInput} has sent you a message.</p>`;

String.raw()

The String.raw() method returns a string where backslashes are escaped, often used for processing template strings.

String.raw`Hi\n${2+3}!`             // "Hi\\n5!"
String.raw`Hi\u000A!`                // 'Hi\\u000A!'

// When called as a function, the first argument should be an object with a raw property
String.raw({ raw: 'test' }, 0, 1, 2) // 't0e1s2t'

Unicode Normalization for Strings

ES6 provides the normalize() method to unify different representations of characters into the same form, known as Unicode normalization.

'\u01D1'.normalize() === '\u004F\u030C'.normalize()  // true

// Parameters specify the normalization form:
// NFC (default), NFD, NFKC, NFKD
'\u004F\u030C'.normalize('NFC')  // "\u01D1"
'\u01D1'.normalize('NFD')        // "\u004F\u030C"