A new method for ES6 strings

1. String.fromCodePoint()

ES5 String.fromCharCode() returning the corresponding character Unicode code point, but this method does not recognize characters with a code point greater than 0xFFFF. 字符

String.fromCharCode(0x20BB7)
// "ஷ"

In the above code, String.fromCharCode() does not recognize the code point greater than 0xFFFF, so the 0x20BB7 overflows, the highest bit 2 is discarded, and finally returns the character for the code point U-0BB7 instead of the character for the code point U-20BB7.

ES6 String.fromCodePoint() which recognizes characters larger than 0xFFFF and compensates for the lack of the String.fromCharCode() method. In effect, it is the opposite of the codePointAt() method below.

String.fromCodePoint(0x20BB7)
// "????"
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
// true

In the above code, if the String.fromCodePoint method has more than one parameter, they are combined and returned as a single string.

Note that the fromCodePoint method is defined on the String object, while the codePointAt method is defined on the instance object of the string.

2. String.raw()

ES6 provides a raw() method for native String objects. The method returns a string where a slash is escaped (that is, a slash is added in front of the slash) and is often used for the processing of template strings.

String.raw`Hi\n${2+3}!`
// 实际返回 "Hi\\n5!"，显示的是转义后的结果 "Hi\n5!"
String.raw`Hi\u000A!`;
// 实际返回 "Hi\\u000A!"，显示的是转义后的结果 "Hi\u000A!"

If the slash of the original string has been escaped, string .raw () is escaped again.

String.raw`Hi\\n`
// 返回 "Hi\\\\n"
String.raw`Hi\\n` === "Hi\\\\n" // true

The String .raw() method can be used as a basic way to handle template strings, it replaces all variables, and the slashes are escaped so that the next step is to use them as strings.

String .raw () is essentially a normal function, just a label function dedicated to template strings. If written as a normal function, its first argument should be an object with a raw property, and the value of the raw property should be an array that corresponds to the parsed value of the template string.

// `foo${1 + 2}bar`
// 等同于
String.raw({ raw: ['foo', 'bar'] }, 1 + 2) // "foo3bar"

In the above code, the .raw of the String method is an object whose raw property is equivalent to the array obtained by the original template string resolution.

As a function, string .raw () code implementation is basically as follows.

String.raw = function (strings, ...values) {
  let output = '';
  let index;
  for (index = 0; index < values.length; index++) {
    output += strings.raw[index] + values[index];
  }
  output += strings.raw[index]
  return output;
}

3. Example method: codePointAt()

Inside JavaScript, characters are UTF-16 format, with each character fixed at 2 bytes. JavaScript considers characters that require 4 bytes of storage (characters with Unicode code points greater than 0xFFFF) to be considered two characters.

var s = "????";
s.length // 2
s.charAt(0) // ''
s.charAt(1) // ''
s.charCodeAt(0) // 55362
s.charCodeAt(1) // 57271

In the code above, the Chinese character "????" ( Note that the code point for this word is not "auspicious") is 0x20BB7, and the UTF-16 is coded 0xD842 0xDFB7 (55362 57271) and requires 4 bytes of storage. JavaScript does not handle this 4-byte character correctly, the string length is misjudged to 2, and the charAt() method cannot read the entire character, and the charCodeAt() method returns only the values of the first two bytes and the last two bytes, respectively.

ES6 codePointAt() method that correctly handles 4 bytes of stored characters and returns a character's code point.

let s = '????a';
s.codePointAt(0) // 134071
s.codePointAt(1) // 57271
s.codePointAt(2) // 97

The parameter of the codePointAt() method, which is the position of the character in the string (starting at 0). I n the code above, JavaScript "???? a " is considered a three-character, and the codePointAt method correctly recognizes "????" on the first character, returning its heteer code point 134071 (i.e., heteen 20BB7). I n the second character (i.e., "????" On the last two bytes of and the third character "a", the codePointAt() method results in the same way as the charCodeAt() method.

In summary, the codePointAt() method correctly returns the code point of the 32-bit UTF-16 character. For those general characters stored with two bytes, it returns the same result as the charCodeAt() method.

The codePointAt() method returns a hedding value for the code point, which can be converted using the toString() method if you want a henrical value.

let s = '????a';
s.codePointAt(0).toString(16) // "20bb7"
s.codePointAt(2).toString(16) // "61"

As you may have noticed, the parameters of the codePointAt() method are still incorrect. F or example, in the code above, the correct positional serial number of character a in string s should be 1, but 2 must be passed in to the codePointAt() method. O ne way to solve this problem is to use for... of loop because it correctly recognizes 32-bit UTF-16 characters.

let s = '????a';
for (let ch of s) {
  console.log(ch.codePointAt(0).toString(16));
}
// 20bb7
// 61

Another approach is also to use an extension operator (... Expand the operation.

let arr = [...'????a']; // arr.length === 2
arr.forEach(
  ch => console.log(ch.codePointAt(0).toString(16))
);
// 20bb7
// 61

The codePointAt() method is the easiest way to test whether a character consists of two or four bytes.

function is32Bit(c) {
  return c.codePointAt(0) > 0xFFFF;
}
is32Bit("????") // true
is32Bit("a") // false

4. Example method: normalize()

Many European languages have intonation and accents. T o represent them, Unicode provides two methods. O ne is to provide characters 重音符号 directly, such as Ǒ ('u01D1'). The other is to provide 合成符号 composition symbol, i.e., a composition of the original character with the accent, in which two characters are combined into one character, such as O ('u004F') and 'u030C' synthesis Ǒ ('u004F'u030C)."

Both are visually and semantically equivalent, but JavaScript is not recognized.

'\u01D1'==='\u004F\u030C' //false
'\u01D1'.length // 1
'\u004F\u030C'.length // 2

The code above indicates that JavaScript treats synthetic characters as two characters, resulting in an unethicized two notions.

ES6 provides a normalize() unify the different notations of characters into the same form, which is called Unicode regularization.

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

The normalize method can accept a parameter to specify how normalize is, and the four optional values of the arguments are as follows.

NFC, the default parameter, represents a Standard Equivalent Composition that returns multiple simple characters. The so-called "standard equivalent" refers to visual and semantic equivalents.
NFD, which means "normalization form equivalent decomposition," which returns multiple simple characters of synthetic character decomposition on a standard equivalent.
NFKC, which means "compatible with equivalent composition," returns synthetic characters. T he so-called "compatible equivalent" refers to the semantic equivalent, but the visual inequality, such as "Yi" and "Happy". ( This is just an example, the normalize method does not recognize Chinese.) ）
NFKD, which means "compatible with equivalent decomposition," returns multiple simple characters of synthetic character decomposition, provided compatible with equivalents.

'\u004F\u030C'.normalize('NFC').length // 1
'\u004F\u030C'.normalize('NFD').length // 2

The above code indicates that the NFC parameter returns the synthetic form of the character, and the NFD parameter returns the decomposition form of the character.

However, the normalize method currently does not recognize compositions of three or more characters. In this case, you can still use only regular expressions, determined by the Unicode number interval.

5. Example methods: includes(), startsWith(), endsWith()

Traditionally, JavaScript has only indexOf methods that can be used to determine whether a string is contained in another string. ES6 provides 三种 approaches.

includes(): Returns a Boolean value to indicate whether an argument string has been found.
StartsWith(): Returns a Boolean value that indicates whether the argument string is at the head of the original string.
EndsWith(): Returns a Boolean value that indicates whether the argument string is at the end of the original string.

let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

All three methods support the second parameter, indicating where the search began.

let s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

The above code indicates that endsWith behaves differently from the other two methods when using the second parameter, n. It targets the first n characters, while the other two methods target from the nth position until the end of the string.

6. Example method: repeat()

repeat method returns a 新字符串 which means that the original string is repeated n times.

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

If the argument is a small number, it is rounded.

'na'.repeat(2.9) // "nana"

If repeat's argument is negative or Infinity, an error is reported.

'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

However, if the argument is a small number between 0 and -1, it is equivalent to 0 because rounding is performed first. A small number between 0 and -1, which is equal to -0 after rounding, and repeat is treated as 0.

'na'.repeat(-0.9) // ""

The parameter NaN is equivalent to 0.

'na'.repeat(NaN) // ""

If the argument for repeat is a string, it is converted to a number first.

'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

7. Example method: padStart(), padEnd()

ES2017 the feature of 补全长度 I f a string does not have a specified length, it is patched at the head or tail. padStart() for head complements, padEnd() for tail complements.

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

In the above code, padStart() and padEnd() accept a total of two parameters, the first is the maximum length of string complement effective, and the second argument is the string used to complete.

If the length of the original string is equal to or greater than the maximum length, the string complement does not take effect and returns the original string.

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

If the string used to complement is the same as the original string, the sum of the lengths exceeds the maximum length, and the complement string that exceeds the number of digits is intercepted.

'abc'.padStart(10, '0123456789')
// '0123456abc'

If the second argument is omitted, the full length is complemented by a space by default.

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

A common use of padStart() is to specify a number of digits for numeric complementation. The following code generates a 10-bit numeric string.

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

Another use is to prompt the string format.

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

8. Example method: trimStart(), trimEnd()

ES2019 adds trimStart() trimEnd() string instances. T hey behave in trim() trimStart() eliminates spaces on the head of the string, trimEnd() eliminates spaces on the tail. They return a new string and do not modify the original string.

const s = '  abc  ';
s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"

In the above code, trimStart() removes only the spaces from the head and retains the spaces at the tail. TrimEnd() behaves in a similar way.

In addition to the space bar, these two methods are also valid for blank symbols that are not visible, such as tab keys at the head (or tail) of the string, line breaks, and so on.

The browser also deploys two additional methods, trimLeft() an alias for trimStart() and trimRight() an alias for trimEnd().

9. Example method: matchAll()

matchAll() method returns a 正则表达式 all matches 所有匹配 the current string, as detailed in the chapter of The Extension of the Regular.

Table of contents