You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
While importing v1 entries in v2.0.4, from the console, I get errors
Here is the corresponding output
[Doctrine\DBAL\Exception\DriverException]
An exception occurred while executing 'INSERT INTO `wallabag_entry` (title, url, is_archived, is_starred, content, creat
ed_at, updated_at, mimetype, language, reading_time, domain_name, preview_picture, is_public, user_id) VALUES (?, ?, ?,
?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)' with params ["lukehoban\/es6features", "https:\/\/github.com\/lukehoban\/es6features",
1, "0", "\n <h3>\n <span class=\"octicon octicon-book\"><\/span>\n README.md\n <\/h3>\n\n <h2><a cla
ss=\"anchor\" href=\"https:\/\/github.com\/lukehoban\/es6features#introduction\"><span class=\"octicon octicon-link\"><\
/span><\/a>Introduction<\/h2>\n\n<p>ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript
standard. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized
in 2009. Implementation of these features in major JavaScript engines is <a href=\"http:\/\/kangax.github.io\/es5-compa
t-table\/es6\/\">underway now<\/a>.<\/p>\n\n<p>See the <a href=\"http:\/\/www.ecma-international.org\/ecma-262\/6.0\/\">
ES6 standard<\/a> for full specification of the ECMAScript 6 language.<\/p>\n\n<p>ES6 includes the following new feature
s:<\/p>\n\n<h2><a class=\"anchor\" href=\"https:\/\/github.com\/lukehoban\/es6features#ecmascript-6-features\"><span cla
ss=\"octicon octicon-link\"><\/span><\/a>ECMAScript 6 Features<\/h2>\n\n<h3><a class=\"anchor\" href=\"https:\/\/github.
com\/lukehoban\/es6features#arrows\"><span class=\"octicon octicon-link\"><\/span><\/a>Arrows<\/h3>\n\n<p>Arrows are a f
unction shorthand using the <code>=><\/code> syntax. They are syntactically similar to the related feature in C#, Ja
va 8 and CoffeeScript. They support both statement block bodies as well as expression bodies which return the value of
the expression. Unlike functions, arrows share the same lexical <code>this<\/code> as their surrounding code.<\/p>\n\n<
div class=\"highlight highlight-source-js\"><pre><span class=\"pl-c\">\/\/ Expression bodies<\/span>\n<span class=\"pl-k
\">var<\/span> odds <span class=\"pl-k\">=<\/span> evens.map(v <span class=\"pl-k\">=><\/span> v <span class=\"pl-k\"
>+<\/span> <span class=\"pl-c1\">1<\/span>);\n<span class=\"pl-k\">var<\/span> nums <span class=\"pl-k\">=<\/span> evens
.map((<span class=\"pl-smi\">v<\/span>, <span class=\"pl-smi\">i<\/span>)<span class=\"pl-k\"> =><\/span> v <span cla
ss=\"pl-k\">+<\/span> i);\n<span class=\"pl-k\">var<\/span> pairs <span class=\"pl-k\">=<\/span> evens.map(v <span class
=\"pl-k\">=><\/span> ({even<span class=\"pl-k\">:<\/span> v, odd<span class=\"pl-k\">:<\/span> v <span class=\"pl-k\"
>+<\/span> <span class=\"pl-c1\">1<\/span>}));\n\n<span class=\"pl-c\">\/\/ Statement bodies<\/span>\nnums.forEach(v <sp
an class=\"pl-k\">=><\/span> {\n <span class=\"pl-k\">if<\/span> (v <span class=\"pl-k\">%<\/span> <span class=\"pl-
c1\">5<\/span> <span class=\"pl-k\">===<\/span> <span class=\"pl-c1\">0<\/span>)\n fives.<span class=\"pl-c1\">push<\
/span>(v);\n});\n\n<span class=\"pl-c\">\/\/ Lexical this<\/span>\n<span class=\"pl-k\">var<\/span> bob <span class=\"pl
-k\">=<\/span> {\n _name<span class=\"pl-k\">:<\/span> <span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>Bob<span c
lass=\"pl-pds\">\"<\/span><\/span>,\n _friends<span class=\"pl-k\">:<\/span> [],\n <span class=\"pl-en\">printFriends<
\/span>() {\n <span class=\"pl-v\">this<\/span>._friends.forEach(f <span class=\"pl-k\">=><\/span>\n <span cl
ass=\"pl-en\">console<\/span>.<span class=\"pl-c1\">log<\/span>(<span class=\"pl-v\">this<\/span>._name <span class=\"pl
-k\">+<\/span> <span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span> knows <span class=\"pl-pds\">\"<\/span><\/span> <s
pan class=\"pl-k\">+<\/span> f));\n }\n}<\/pre><\/div>\n\n<h3><a class=\"anchor\" href=\"https:\/\/github.com\/lukehoba
n\/es6features#classes\"><span class=\"octicon octicon-link\"><\/span><\/a>Classes<\/h3>\n\n<p>ES6 classes are a simple
sugar over the prototype-based OO pattern. Having a single convenient declarative form makes class patterns easier to u
se, and encourages interoperability. Classes support prototype-based inheritance, super calls, instance and static meth
ods and constructors.<\/p>\n\n<div class=\"highlight highlight-source-js\"><pre><span class=\"pl-k\">class<\/span> <span
class=\"pl-en\">SkinnedMesh<\/span> <span class=\"pl-k\">extends<\/span> <span class=\"pl-en\">THREE.Mesh<\/span> {\n
<span class=\"pl-en\">constructor<\/span>(<span class=\"pl-smi\">geometry<\/span>, <span class=\"pl-smi\">materials<\/sp
an>) {\n <span class=\"pl-v\">super<\/span>(geometry, materials);\n\n <span class=\"pl-v\">this<\/span>.idMatrix <
span class=\"pl-k\">=<\/span> SkinnedMesh.defaultMatrix();\n <span class=\"pl-v\">this<\/span>.bones <span class=\"pl
-k\">=<\/span> [];\n <span class=\"pl-v\">this<\/span>.boneMatrices <span class=\"pl-k\">=<\/span> [];\n <span cla
ss=\"pl-c\">\/\/...<\/span>\n }\n <span class=\"pl-en\">update<\/span>(<span class=\"pl-smi\">camera<\/span>) {\n <
span class=\"pl-c\">\/\/...<\/span>\n <span class=\"pl-v\">super<\/span>.update();\n }\n get <span class=\"pl-en\">
boneCount<\/span>() {\n <span class=\"pl-k\">return<\/span> <span class=\"pl-v\">this<\/span>.bones.<span class=\"pl-
c1\">length<\/span>;\n }\n set <span class=\"pl-en\">matrixType<\/span>(<span class=\"pl-smi\">matrixType<\/span>) {\n
<span class=\"pl-v\">this<\/span>.idMatrix <span class=\"pl-k\">=<\/span> SkinnedMesh[matrixType]();\n }\n <span c
lass=\"pl-k\">static<\/span> <span class=\"pl-en\">defaultMatrix<\/span>() {\n <span class=\"pl-k\">return<\/span> <s
pan class=\"pl-k\">new<\/span> <span class=\"pl-en\">THREE.Matrix4<\/span>();\n }\n}<\/pre><\/div>\n\n<h3><a class=\"an
chor\" href=\"https:\/\/github.com\/lukehoban\/es6features#enhanced-object-literals\"><span class=\"octicon octicon-link
\"><\/span><\/a>Enhanced Object Literals<\/h3>\n\n<p>Object literals are extended to support setting the prototype at co
nstruction, shorthand for <code>foo: foo<\/code> assignments, defining methods, making super calls, and computing proper
ty names with expressions. Together, these also bring object literals and class declarations closer together, and let o
bject-based design benefit from some of the same conveniences.<\/p>\n\n<div class=\"highlight highlight-source-js\"><pre
><span class=\"pl-k\">var<\/span> obj <span class=\"pl-k\">=<\/span> {\n <span class=\"pl-c\">\/\/ __proto__<\/span>\
n __proto__<span class=\"pl-k\">:<\/span> theProtoObj,\n <span class=\"pl-c\">\/\/ Shorthand for \u2018handler: ha
ndler\u2019<\/span>\n handler,\n <span class=\"pl-c\">\/\/ Methods<\/span>\n <span class=\"pl-en\">toString<\/s
pan>() {\n <span class=\"pl-c\">\/\/ Super calls<\/span>\n <span class=\"pl-k\">return<\/span> <span class=\"pl-
s\"><span class=\"pl-pds\">\"<\/span>d <span class=\"pl-pds\">\"<\/span><\/span> <span class=\"pl-k\">+<\/span> <span cl
ass=\"pl-v\">super<\/span>.<span class=\"pl-c1\">toString<\/span>();\n },\n <span class=\"pl-c\">\/\/ Computed (dy
namic) property names<\/span>\n [ <span class=\"pl-s\"><span class=\"pl-pds\">'<\/span>prop_<span class=\"pl-pds\">'<
\/span><\/span> <span class=\"pl-k\">+<\/span> (()<span class=\"pl-k\"> =><\/span> <span class=\"pl-c1\">42<\/span>)(
) ]<span class=\"pl-k\">:<\/span> <span class=\"pl-c1\">42<\/span>\n};<\/pre><\/div>\n\n<h3><a class=\"anchor\" href=\"h
ttps:\/\/github.com\/lukehoban\/es6features#template-strings\"><span class=\"octicon octicon-link\"><\/span><\/a>Templat
e Strings<\/h3>\n\n<p>Template strings provide syntactic sugar for constructing strings. This is similar to string inte
rpolation features in Perl, Python and more. Optionally, a tag can be added to allow the string construction to be cust
omized, avoiding injection attacks or constructing higher level data structures from string contents.<\/p>\n\n<div class
=\"highlight highlight-source-js\"><pre><span class=\"pl-c\">\/\/ Basic literal string creation<\/span>\n<span class=\"p
l-s\"><span class=\"pl-pds\">`<\/span>In JavaScript '<span class=\"pl-cce\">\\n<\/span>' is a line-feed.<span class=\"pl
-pds\">`<\/span><\/span>\n\n<span class=\"pl-c\">\/\/ Multiline strings<\/span>\n<span class=\"pl-s\"><span class=\"pl-p
ds\">`<\/span>In JavaScript this is<\/span>\n<span class=\"pl-s\"> not legal.<span class=\"pl-pds\">`<\/span><\/span>\n\
n<span class=\"pl-c\">\/\/ String interpolation<\/span>\n<span class=\"pl-k\">var<\/span> name <span class=\"pl-k\">=<\/
span> <span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>Bob<span class=\"pl-pds\">\"<\/span><\/span>, time <span cla
ss=\"pl-k\">=<\/span> <span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>today<span class=\"pl-pds\">\"<\/span><\/spa
n>;\n<span class=\"pl-s\"><span class=\"pl-pds\">`<\/span>Hello <span class=\"pl-s1\"><span class=\"pl-pse\">${<\/span>n
ame<span class=\"pl-pse\">}<\/span><\/span>, how are you <span class=\"pl-s1\"><span class=\"pl-pse\">${<\/span>time<spa
n class=\"pl-pse\">}<\/span><\/span>?<span class=\"pl-pds\">`<\/span><\/span>\n\n<span class=\"pl-c\">\/\/ Construct an
HTTP request prefix is used to interpret the replacements and construction<\/span>\n<span class=\"pl-c1\">POST<\/span><s
pan class=\"pl-s\"><span class=\"pl-pds\">`<\/span>http:\/\/foo.org\/bar?a=<span class=\"pl-s1\"><span class=\"pl-pse\">
${<\/span>a<span class=\"pl-pse\">}<\/span><\/span>&b=<span class=\"pl-s1\"><span class=\"pl-pse\">${<\/span>b<span
class=\"pl-pse\">}<\/span><\/span><\/span>\n<span class=\"pl-s\"> Content-Type: application\/json<\/span>\n<span cla
ss=\"pl-s\"> X-Credentials: <span class=\"pl-s1\"><span class=\"pl-pse\">${<\/span>credentials<span class=\"pl-pse\"
>}<\/span><\/span><\/span>\n<span class=\"pl-s\"> { \"foo\": <span class=\"pl-s1\"><span class=\"pl-pse\">${<\/span>
foo<span class=\"pl-pse\">}<\/span><\/span>,<\/span>\n<span class=\"pl-s\"> \"bar\": <span class=\"pl-s1\"><span c
lass=\"pl-pse\">${<\/span>bar<span class=\"pl-pse\">}<\/span><\/span>}<span class=\"pl-pds\">`<\/span><\/span>(myOnReady
StateChangeHandler);<\/pre><\/div>\n\n<h3><a class=\"anchor\" href=\"https:\/\/github.com\/lukehoban\/es6features#destru
cturing\"><span class=\"octicon octicon-link\"><\/span><\/a>Destructuring<\/h3>\n\n<p>Destructuring allows binding using
pattern matching, with support for matching arrays and objects. Destructuring is fail-soft, similar to standard object
lookup <code>foo[\"bar\"]<\/code>, producing <code>undefined<\/code> values when not found.<\/p>\n\n<div class=\"highli
ght highlight-source-js\"><pre><span class=\"pl-c\">\/\/ list matching<\/span>\n<span class=\"pl-k\">var<\/span> [a, , b
] <span class=\"pl-k\">=<\/span> [<span class=\"pl-c1\">1<\/span>,<span class=\"pl-c1\">2<\/span>,<span class=\"pl-c1\">
3<\/span>];\n\n<span class=\"pl-c\">\/\/ object matching<\/span>\n<span class=\"pl-k\">var<\/span> { op<span class=\"pl-
k\">:<\/span> a, lhs<span class=\"pl-k\">:<\/span> { op<span class=\"pl-k\">:<\/span> b }, rhs<span class=\"pl-k\">:<\/s
pan> c }\n <span class=\"pl-k\">=<\/span> getASTNode()\n\n<span class=\"pl-c\">\/\/ object matching shorthand<\/sp
an>\n<span class=\"pl-c\">\/\/ binds `op`, `lhs` and `rhs` in scope<\/span>\n<span class=\"pl-k\">var<\/span> {op, lhs,
rhs} <span class=\"pl-k\">=<\/span> getASTNode()\n\n<span class=\"pl-c\">\/\/ Can be used in parameter position<\/span>\
n<span class=\"pl-k\">function<\/span> <span class=\"pl-en\">g<\/span>({<span class=\"pl-smi\">name<\/span>: <span class
=\"pl-smi\">x<\/span>}) {\n <span class=\"pl-en\">console<\/span>.<span class=\"pl-c1\">log<\/span>(x);\n}\ng({name<spa
n class=\"pl-k\">:<\/span> <span class=\"pl-c1\">5<\/span>})\n\n<span class=\"pl-c\">\/\/ Fail-soft destructuring<\/span
>\n<span class=\"pl-k\">var<\/span> [a] <span class=\"pl-k\">=<\/span> [];\na <span class=\"pl-k\">===<\/span> <span cla
ss=\"pl-c1\">undefined<\/span>;\n\n<span class=\"pl-c\">\/\/ Fail-soft destructuring with defaults<\/span>\n<span class=
\"pl-k\">var<\/span> [a <span class=\"pl-k\">=<\/span> <span class=\"pl-c1\">1<\/span>] <span class=\"pl-k\">=<\/span> [
];\na <span class=\"pl-k\">===<\/span> <span class=\"pl-c1\">1<\/span>;<\/pre><\/div>\n\n<h3><a class=\"anchor\" href=\"
https:\/\/github.com\/lukehoban\/es6features#default--rest--spread\"><span class=\"octicon octicon-link\"><\/span><\/a>D
efault + Rest + Spread<\/h3>\n\n<p>Callee-evaluated default parameter values. Turn an array into consecutive arguments
in a function call. Bind trailing parameters to an array. Rest replaces the need for <code>arguments<\/code> and addre
sses common cases more directly.<\/p>\n\n<div class=\"highlight highlight-source-js\"><pre><span class=\"pl-k\">function
<\/span> <span class=\"pl-en\">f<\/span>(<span class=\"pl-smi\">x<\/span>, <span class=\"pl-smi\">y<\/span><span class=\
"pl-k\">=<\/span><span class=\"pl-c1\">12<\/span>) {\n <span class=\"pl-c\">\/\/ y is 12 if not passed (or passed as un
defined)<\/span>\n <span class=\"pl-k\">return<\/span> x <span class=\"pl-k\">+<\/span> y;\n}\nf(<span class=\"pl-c1\">
3<\/span>) <span class=\"pl-k\">==<\/span> <span class=\"pl-c1\">15<\/span><\/pre><\/div>\n\n<div class=\"highlight high
light-source-js\"><pre><span class=\"pl-k\">function<\/span> <span class=\"pl-en\">f<\/span>(<span class=\"pl-smi\">x<\/
span>, ...<span class=\"pl-smi\">y<\/span>) {\n <span class=\"pl-c\">\/\/ y is an Array<\/span>\n <span class=\"pl-k\"
>return<\/span> x <span class=\"pl-k\">*<\/span> y.<span class=\"pl-c1\">length<\/span>;\n}\nf(<span class=\"pl-c1\">3<\
/span>, <span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>hello<span class=\"pl-pds\">\"<\/span><\/span>, <span clas
s=\"pl-c1\">true<\/span>) <span class=\"pl-k\">==<\/span> <span class=\"pl-c1\">6<\/span><\/pre><\/div>\n\n<div class=\"
highlight highlight-source-js\"><pre><span class=\"pl-k\">function<\/span> <span class=\"pl-en\">f<\/span>(<span class=\
"pl-smi\">x<\/span>, <span class=\"pl-smi\">y<\/span>, <span class=\"pl-smi\">z<\/span>) {\n <span class=\"pl-k\">retur
n<\/span> x <span class=\"pl-k\">+<\/span> y <span class=\"pl-k\">+<\/span> z;\n}\n<span class=\"pl-c\">\/\/ Pass each e
lem of array as argument<\/span>\nf(...[<span class=\"pl-c1\">1<\/span>,<span class=\"pl-c1\">2<\/span>,<span class=\"pl
-c1\">3<\/span>]) <span class=\"pl-k\">==<\/span> <span class=\"pl-c1\">6<\/span><\/pre><\/div>\n\n<h3><a class=\"anchor
\" href=\"https:\/\/github.com\/lukehoban\/es6features#let--const\"><span class=\"octicon octicon-link\"><\/span><\/a>Le
t + Const<\/h3>\n\n<p>Block-scoped binding constructs. <code>let<\/code> is the new <code>var<\/code>. <code>const<\/c
ode> is single-assignment. Static restrictions prevent use before assignment.<\/p>\n\n<div class=\"highlight highlight-
source-js\"><pre><span class=\"pl-k\">function<\/span> <span class=\"pl-en\">f<\/span>() {\n {\n <span class=\"pl-k\
">let<\/span> x;\n {\n <span class=\"pl-c\">\/\/ okay, block scoped name<\/span>\n <span class=\"pl-k\">con
st<\/span> <span class=\"pl-c1\">x<\/span> <span class=\"pl-k\">=<\/span> <span class=\"pl-s\"><span class=\"pl-pds\">\"
<\/span>sneaky<span class=\"pl-pds\">\"<\/span><\/span>;\n <span class=\"pl-c\">\/\/ error, const<\/span>\n x
<span class=\"pl-k\">=<\/span> <span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>foo<span class=\"pl-pds\">\"<\/span
><\/span>;\n }\n <span class=\"pl-c\">\/\/ error, already declared in block<\/span>\n <span class=\"pl-k\">let<
\/span> x <span class=\"pl-k\">=<\/span> <span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>inner<span class=\"pl-pds
\">\"<\/span><\/span>;\n }\n}<\/pre><\/div>\n\n<h3><a class=\"anchor\" href=\"https:\/\/github.com\/lukehoban\/es6featu
res#iterators--forof\"><span class=\"octicon octicon-link\"><\/span><\/a>Iterators + For..Of<\/h3>\n\n<p>Iterator object
s enable custom iteration like CLR IEnumerable or Java Iterable. Generalize <code>for..in<\/code> to custom iterator-ba
sed iteration with <code>for..of<\/code>. Don\u2019t require realizing an array, enabling lazy design patterns like LIN
Q.<\/p>\n\n<div class=\"highlight highlight-source-js\"><pre><span class=\"pl-k\">let<\/span> fibonacci <span class=\"pl
-k\">=<\/span> {\n [Symbol.iterator]() {\n <span class=\"pl-k\">let<\/span> pre <span class=\"pl-k\">=<\/span> <span
class=\"pl-c1\">0<\/span>, cur <span class=\"pl-k\">=<\/span> <span class=\"pl-c1\">1<\/span>;\n <span class=\"pl-k\
">return<\/span> {\n <span class=\"pl-en\">next<\/span>() {\n [pre, cur] <span class=\"pl-k\">=<\/span> [cur
, pre <span class=\"pl-k\">+<\/span> cur];\n <span class=\"pl-k\">return<\/span> { done<span class=\"pl-k\">:<\/s
pan> <span class=\"pl-c1\">false<\/span>, value<span class=\"pl-k\">:<\/span> cur }\n }\n }\n }\n}\n\n<span cla
ss=\"pl-k\">for<\/span> (<span class=\"pl-k\">var<\/span> n <span class=\"pl-k\">of<\/span> fibonacci) {\n <span class=
\"pl-c\">\/\/ truncate the sequence at 1000<\/span>\n <span class=\"pl-k\">if<\/span> (n <span class=\"pl-k\">><\/sp
an> <span class=\"pl-c1\">1000<\/span>)\n <span class=\"pl-k\">break<\/span>;\n <span class=\"pl-en\">console<\/span
>.<span class=\"pl-c1\">log<\/span>(n);\n}<\/pre><\/div>\n\n<p>Iteration is based on these duck-typed interfaces (using
<a href=\"http:\/\/typescriptlang.org\">TypeScript<\/a> type syntax for exposition only):<\/p>\n\n<div class=\"highlight
highlight-source-ts\"><pre><span class=\"pl-k\">interface<\/span> <span class=\"pl-en\">IteratorResult<\/span> {\n <sp
an class=\"pl-v\">done<\/span>: <span class=\"pl-k\">boolean<\/span>;\n <span class=\"pl-v\">value<\/span>: <span class
=\"pl-k\">any<\/span>;\n}\n<span class=\"pl-k\">interface<\/span> <span class=\"pl-en\">Iterator<\/span> {\n <span clas
s=\"pl-en\">next<\/span>(): IteratorResult;\n}\n<span class=\"pl-k\">interface<\/span> <span class=\"pl-en\">Iterable<\/
span> {\n [Symbol.iterator](): Iterator\n}<\/pre><\/div>\n\n<h3><a class=\"anchor\" href=\"https:\/\/github.com\/lukeho
ban\/es6features#generators\"><span class=\"octicon octicon-link\"><\/span><\/a>Generators<\/h3>\n\n<p>Generators simpli
fy iterator-authoring using <code>function*<\/code> and <code>yield<\/code>. A function declared as function* returns a
Generator instance. Generators are subtypes of iterators which include additional <code>next<\/code> and <code>throw<
\/code>. These enable values to flow back into the generator, so <code>yield<\/code> is an expression form which return
s a value (or throws).<\/p>\n\n<p>Note: Can also be used to enable \u2018await\u2019-like async programming, see also ES
7 <code>await<\/code> proposal.<\/p>\n\n<div class=\"highlight highlight-source-js\"><pre><span class=\"pl-k\">var<\/spa
n> fibonacci <span class=\"pl-k\">=<\/span> {\n [Symbol.iterator]<span class=\"pl-k\">:<\/span> <span class=\"pl-k\">fu
nction*<\/span>() {\n <span class=\"pl-k\">var<\/span> pre <span class=\"pl-k\">=<\/span> <span class=\"pl-c1\">0<\/s
pan>, cur <span class=\"pl-k\">=<\/span> <span class=\"pl-c1\">1<\/span>;\n <span class=\"pl-k\">for<\/span> (;;) {\n
<span class=\"pl-k\">var<\/span> temp <span class=\"pl-k\">=<\/span> pre;\n pre <span class=\"pl-k\">=<\/span
> cur;\n cur <span class=\"pl-k\">+=<\/span> temp;\n <span class=\"pl-k\">yield<\/span> cur;\n }\n }\n}\n\
n<span class=\"pl-k\">for<\/span> (<span class=\"pl-k\">var<\/span> n <span class=\"pl-k\">of<\/span> fibonacci) {\n <s
pan class=\"pl-c\">\/\/ truncate the sequence at 1000<\/span>\n <span class=\"pl-k\">if<\/span> (n <span class=\"pl-k\"
>><\/span> <span class=\"pl-c1\">1000<\/span>)\n <span class=\"pl-k\">break<\/span>;\n <span class=\"pl-en\">cons
ole<\/span>.<span class=\"pl-c1\">log<\/span>(n);\n}<\/pre><\/div>\n\n<p>The generator interface is (using <a href=\"htt
p:\/\/typescriptlang.org\">TypeScript<\/a> type syntax for exposition only):<\/p>\n\n<div class=\"highlight highlight-so
urce-ts\"><pre><span class=\"pl-k\">interface<\/span> <span class=\"pl-en\">Generator<\/span> <span class=\"pl-k\">exten
ds<\/span> <span class=\"pl-k\">Iterator<\/span> {\n <span class=\"pl-en\">next<\/span>(<span class=\"pl-v\">value<\/
span><span class=\"pl-k\">?<\/span>: <span class=\"pl-k\">any<\/span>): IteratorResult;\n <span class=\"pl-en\">throw
<\/span>(<span class=\"pl-v\">exception<\/span>: <span class=\"pl-k\">any<\/span>);\n}<\/pre><\/div>\n\n<h3><a class=\"a
nchor\" href=\"https:\/\/github.com\/lukehoban\/es6features#unicode\"><span class=\"octicon octicon-link\"><\/span><\/a>
Unicode<\/h3>\n\n<p>Non-breaking additions to support full Unicode, including new Unicode literal form in strings and ne
w RegExp <code>u<\/code> mode to handle code points, as well as new APIs to process strings at the 21bit code points lev
el. These additions support building global apps in JavaScript.<\/p>\n\n<div class=\"highlight highlight-source-js\"><p
re><span class=\"pl-c\">\/\/ same as ES5.1<\/span>\n<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>\ud842\udfb7<s
pan class=\"pl-pds\">\"<\/span><\/span>.<span class=\"pl-c1\">length<\/span> <span class=\"pl-k\">==<\/span> <span class
=\"pl-c1\">2<\/span>\n\n<span class=\"pl-c\">\/\/ new RegExp behaviour, opt-in \u2018u\u2019<\/span>\n<span class=\"pl-s
\"><span class=\"pl-pds\">\"<\/span>\ud842\udfb7<span class=\"pl-pds\">\"<\/span><\/span>.<span class=\"pl-c1\">match<\/
span>(<span class=\"pl-sr\"><span class=\"pl-pds\">\/<\/span><span class=\"pl-c1\">.<\/span><span class=\"pl-pds\">\/<\/
span>u<\/span>)[<span class=\"pl-c1\">0<\/span>].<span class=\"pl-c1\">length<\/span> <span class=\"pl-k\">==<\/span> <s
pan class=\"pl-c1\">2<\/span>\n\n<span class=\"pl-c\">\/\/ new form<\/span>\n<span class=\"pl-s\"><span class=\"pl-pds\"
>\"<\/span><span class=\"pl-cce\">\\u<\/span>{20BB7}<span class=\"pl-pds\">\"<\/span><\/span><span class=\"pl-k\">==<\/s
pan><span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>\ud842\udfb7<span class=\"pl-pds\">\"<\/span><\/span><span cla
ss=\"pl-k\">==<\/span><span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span><span class=\"pl-cce\">\\u<\/span>D842<span
class=\"pl-cce\">\\u<\/span>DFB7<span class=\"pl-pds\">\"<\/span><\/span>\n\n<span class=\"pl-c\">\/\/ new String ops<\/
span>\n<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>\ud842\udfb7<span class=\"pl-pds\">\"<\/span><\/span>.codeP
ointAt(<span class=\"pl-c1\">0<\/span>) <span class=\"pl-k\">==<\/span> <span class=\"pl-c1\">0x20BB7<\/span>\n\n<span c
lass=\"pl-c\">\/\/ for-of iterates code points<\/span>\n<span class=\"pl-k\">for<\/span>(<span class=\"pl-k\">var<\/span
> c <span class=\"pl-k\">of<\/span> <span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>\ud842\udfb7<span class=\"pl-p
ds\">\"<\/span><\/span>) {\n <span class=\"pl-en\">console<\/span>.<span class=\"pl-c1\">log<\/span>(c);\n}<\/pre><\/di
v>\n\n<h3><a class=\"anchor\" href=\"https:\/\/github.com\/lukehoban\/es6features#modules\"><span class=\"octicon octico
n-link\"><\/span><\/a>Modules<\/h3>\n\n<p>Language-level support for modules for component definition. Codifies pattern
s from popular JavaScript module loaders (AMD, CommonJS). Runtime behaviour defined by a host-defined default loader. I
mplicitly async model \u2013 no code executes until requested modules are available and processed.<\/p>\n\n<div class=\"
highlight highlight-source-js\"><pre><span class=\"pl-c\">\/\/ lib\/math.js<\/span>\n<span class=\"pl-k\">export<\/span>
<span class=\"pl-k\">function<\/span> <span class=\"pl-en\">sum<\/span>(<span class=\"pl-smi\">x<\/span>, <span class=\
"pl-smi\">y<\/span>) {\n <span class=\"pl-k\">return<\/span> x <span class=\"pl-k\">+<\/span> y;\n}\n<span class=\"pl-k
\">export<\/span> <span class=\"pl-k\">var<\/span> pi <span class=\"pl-k\">=<\/span> <span class=\"pl-c1\">3.141593<\/sp
an>;<\/pre><\/div>\n\n<div class=\"highlight highlight-source-js\"><pre><span class=\"pl-c\">\/\/ app.js<\/span>\n<span
class=\"pl-k\">import<\/span> <span class=\"pl-v\">*<\/span> <span class=\"pl-k\">as<\/span> <span class=\"pl-smi\">math
<\/span> <span class=\"pl-k\">from<\/span> <span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>lib\/math<span class=\"
pl-pds\">\"<\/span><\/span>;\n<span class=\"pl-c1\">alert<\/span>(<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>
2\u03c0 = <span class=\"pl-pds\">\"<\/span><\/span> <span class=\"pl-k\">+<\/span> math.sum(math.pi, math.pi));<\/pre><\
/div>\n\n<div class=\"highlight highlight-source-js\"><pre><span class=\"pl-c\">\/\/ otherApp.js<\/span>\n<span class=\"
pl-k\">import<\/span> {<span class=\"pl-smi\">sum<\/span>, <span class=\"pl-smi\">pi<\/span>} <span class=\"pl-k\">from<
\/span> <span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>lib\/math<span class=\"pl-pds\">\"<\/span><\/span>;\n<span
class=\"pl-c1\">alert<\/span>(<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>2\u03c0 = <span class=\"pl-pds\">\"
<\/span><\/span> <span class=\"pl-k\">+<\/span> sum(pi, pi));<\/pre><\/div>\n\n<p>Some additional features include <code
>export default<\/code> and <code>export *<\/code>:<\/p>\n\n<div class=\"highlight highlight-source-js\"><pre><span clas
s=\"pl-c\">\/\/ lib\/mathplusplus.js<\/span>\n<span class=\"pl-k\">export<\/span> <span class=\"pl-v\">*<\/span> <span c
lass=\"pl-k\">from<\/span> <span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>lib\/math<span class=\"pl-pds\">\"<\/sp
an><\/span>;\n<span class=\"pl-k\">export<\/span> <span class=\"pl-k\">var<\/span> e <span class=\"pl-k\">=<\/span> <spa
n class=\"pl-c1\">2.71828182846<\/span>;\n<span class=\"pl-k\">export<\/span> <span class=\"pl-v\">default<\/span> <span
class=\"pl-k\">function<\/span>(<span class=\"pl-smi\">x<\/span>) {\n <span class=\"pl-k\">return<\/span> <span clas
s=\"pl-c1\">Math<\/span>.<span class=\"pl-c1\">log<\/span>(x);\n}<\/pre><\/div>\n\n<div class=\"highlight highlight-sour
ce-js\"><pre><span class=\"pl-c\">\/\/ app.js<\/span>\n<span class=\"pl-k\">import<\/span> <span class=\"pl-smi\">ln<\/s
pan>, {<span class=\"pl-smi\">pi<\/span>, <span class=\"pl-smi\">e<\/span>} <span class=\"pl-k\">from<\/span> <span clas
s=\"pl-s\"><span class=\"pl-pds\">\"<\/span>lib\/mathplusplus<span class=\"pl-pds\">\"<\/span><\/span>;\n<span class=\"p
l-c1\">alert<\/span>(<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>2\u03c0 = <span class=\"pl-pds\">\"<\/span><\
/span> <span class=\"pl-k\">+<\/span> ln(e)<span class=\"pl-k\">*<\/span>pi<span class=\"pl-k\">*<\/span><span class=\"p
l-c1\">2<\/span>);<\/pre><\/div>\n\n<h3><a class=\"anchor\" href=\"https:\/\/github.com\/lukehoban\/es6features#module-l
oaders\"><span class=\"octicon octicon-link\"><\/span><\/a>Module Loaders<\/h3>\n\n<p>Module loaders support:<\/p>\n\n<u
l><li>Dynamic loading<\/li>\n<li>State isolation<\/li>\n<li>Global namespace isolation<\/li>\n<li>Compilation hooks<\/li
>\n<li>Nested virtualization<\/li>\n<\/ul><p>The default module loader can be configured, and new loaders can be constru
cted to evaluate and load code in isolated or constrained contexts.<\/p>\n\n<div class=\"highlight highlight-source-js\"
><pre><span class=\"pl-c\">\/\/ Dynamic loading \u2013 \u2018System\u2019 is default loader<\/span>\nSystem.import(<span
class=\"pl-s\"><span class=\"pl-pds\">'<\/span>lib\/math<span class=\"pl-pds\">'<\/span><\/span>).then(<span class=\"pl
-k\">function<\/span>(<span class=\"pl-smi\">m<\/span>) {\n <span class=\"pl-c1\">alert<\/span>(<span class=\"pl-s\"><s
pan class=\"pl-pds\">\"<\/span>2\u03c0 = <span class=\"pl-pds\">\"<\/span><\/span> <span class=\"pl-k\">+<\/span> m.sum(
m.pi, m.pi));\n});\n\n<span class=\"pl-c\">\/\/ Create execution sandboxes \u2013 new Loaders<\/span>\n<span class=\"pl-
k\">var<\/span> loader <span class=\"pl-k\">=<\/span> <span class=\"pl-k\">new<\/span> <span class=\"pl-en\">Loader<\/sp
an>({\n global<span class=\"pl-k\">:<\/span> fixup(<span class=\"pl-c1\">window<\/span>) <span class=\"pl-c\">\/\/ repl
ace \u2018console.log\u2019<\/span>\n});\nloader.<span class=\"pl-c1\">eval<\/span>(<span class=\"pl-s\"><span class=\"p
l-pds\">\"<\/span>console.log('hello world!');<span class=\"pl-pds\">\"<\/span><\/span>);\n\n<span class=\"pl-c\">\/\/ D
irectly manipulate module cache<\/span>\nSystem.get(<span class=\"pl-s\"><span class=\"pl-pds\">'<\/span>jquery<span cla
ss=\"pl-pds\">'<\/span><\/span>);\nSystem.set(<span class=\"pl-s\"><span class=\"pl-pds\">'<\/span>jquery<span class=\"p
l-pds\">'<\/span><\/span>, Module({$<span class=\"pl-k\">:<\/span> $})); <span class=\"pl-c\">\/\/ WARNING: not yet fina
lized<\/span><\/pre><\/div>\n\n<h3><a class=\"anchor\" href=\"https:\/\/github.com\/lukehoban\/es6features#map--set--wea
kmap--weakset\"><span class=\"octicon octicon-link\"><\/span><\/a>Map + Set + WeakMap + WeakSet<\/h3>\n\n<p>Efficient da
ta structures for common algorithms. WeakMaps provides leak-free object-key\u2019d side tables.<\/p>\n\n<div class=\"hi
ghlight highlight-source-js\"><pre><span class=\"pl-c\">\/\/ Sets<\/span>\n<span class=\"pl-k\">var<\/span> s <span clas
s=\"pl-k\">=<\/span> <span class=\"pl-k\">new<\/span> <span class=\"pl-en\">Set<\/span>();\ns.<span class=\"pl-c1\">add<
\/span>(<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>hello<span class=\"pl-pds\">\"<\/span><\/span>).<span clas
s=\"pl-c1\">add<\/span>(<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>goodbye<span class=\"pl-pds\">\"<\/span><\
/span>).<span class=\"pl-c1\">add<\/span>(<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>hello<span class=\"pl-pd
s\">\"<\/span><\/span>);\ns.<span class=\"pl-c1\">size<\/span> <span class=\"pl-k\">===<\/span> <span class=\"pl-c1\">2<
\/span>;\ns.has(<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>hello<span class=\"pl-pds\">\"<\/span><\/span>) <s
pan class=\"pl-k\">===<\/span> <span class=\"pl-c1\">true<\/span>;\n\n<span class=\"pl-c\">\/\/ Maps<\/span>\n<span clas
s=\"pl-k\">var<\/span> m <span class=\"pl-k\">=<\/span> <span class=\"pl-k\">new<\/span> <span class=\"pl-en\">Map<\/spa
n>();\nm.set(<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>hello<span class=\"pl-pds\">\"<\/span><\/span>, <span
class=\"pl-c1\">42<\/span>);\nm.set(s, <span class=\"pl-c1\">34<\/span>);\nm.get(s) <span class=\"pl-k\">==<\/span> <sp
an class=\"pl-c1\">34<\/span>;\n\n<span class=\"pl-c\">\/\/ Weak Maps<\/span>\n<span class=\"pl-k\">var<\/span> wm <span
class=\"pl-k\">=<\/span> <span class=\"pl-k\">new<\/span> <span class=\"pl-en\">WeakMap<\/span>();\nwm.set(s, { extra<s
pan class=\"pl-k\">:<\/span> <span class=\"pl-c1\">42<\/span> });\nwm.<span class=\"pl-c1\">size<\/span> <span class=\"p
l-k\">===<\/span> <span class=\"pl-c1\">undefined<\/span>\n\n<span class=\"pl-c\">\/\/ Weak Sets<\/span>\n<span class=\"
pl-k\">var<\/span> ws <span class=\"pl-k\">=<\/span> <span class=\"pl-k\">new<\/span> <span class=\"pl-en\">WeakSet<\/sp
an>();\nws.<span class=\"pl-c1\">add<\/span>({ data<span class=\"pl-k\">:<\/span> <span class=\"pl-c1\">42<\/span> });\n
<span class=\"pl-c\">\/\/ Because the added object has no other references, it will not be held in the set<\/span><\/pre
><\/div>\n\n<h3><a class=\"anchor\" href=\"https:\/\/github.com\/lukehoban\/es6features#proxies\"><span class=\"octicon
octicon-link\"><\/span><\/a>Proxies<\/h3>\n\n<p>Proxies enable creation of objects with the full range of behaviors avai
lable to host objects. Can be used for interception, object virtualization, logging\/profiling, etc.<\/p>\n\n<div class
=\"highlight highlight-source-js\"><pre><span class=\"pl-c\">\/\/ Proxying a normal object<\/span>\n<span class=\"pl-k\"
>var<\/span> target <span class=\"pl-k\">=<\/span> {};\n<span class=\"pl-k\">var<\/span> handler <span class=\"pl-k\">=<
\/span> {\n <span class=\"pl-en\">get<\/span><span class=\"pl-k\">:<\/span> <span class=\"pl-k\">function<\/span> (<spa
n class=\"pl-smi\">receiver<\/span>, <span class=\"pl-smi\">name<\/span>) {\n <span class=\"pl-k\">return<\/span> <sp
an class=\"pl-s\"><span class=\"pl-pds\">`<\/span>Hello, <span class=\"pl-s1\"><span class=\"pl-pse\">${<\/span>name<spa
n class=\"pl-pse\">}<\/span><\/span>!<span class=\"pl-pds\">`<\/span><\/span>;\n }\n};\n\n<span class=\"pl-k\">var<\/sp
an> p <span class=\"pl-k\">=<\/span> <span class=\"pl-k\">new<\/span> <span class=\"pl-en\">Proxy<\/span>(target, handle
r);\np.world <span class=\"pl-k\">===<\/span> <span class=\"pl-s\"><span class=\"pl-pds\">'<\/span>Hello, world!<span cl
ass=\"pl-pds\">'<\/span><\/span>;<\/pre><\/div>\n\n<div class=\"highlight highlight-source-js\"><pre><span class=\"pl-c\
">\/\/ Proxying a function object<\/span>\n<span class=\"pl-k\">var<\/span> <span class=\"pl-en\">target<\/span> <span c
lass=\"pl-k\">=<\/span> <span class=\"pl-k\">function<\/span> () { <span class=\"pl-k\">return<\/span> <span class=\"pl-
s\"><span class=\"pl-pds\">'<\/span>I am the target<span class=\"pl-pds\">'<\/span><\/span>; };\n<span class=\"pl-k\">va
r<\/span> handler <span class=\"pl-k\">=<\/span> {\n <span class=\"pl-en\">apply<\/span><span class=\"pl-k\">:<\/span>
<span class=\"pl-k\">function<\/span> (<span class=\"pl-smi\">receiver<\/span>, ...<span class=\"pl-smi\">args<\/span>)
{\n <span class=\"pl-k\">return<\/span> <span class=\"pl-s\"><span class=\"pl-pds\">'<\/span>I am the proxy<span clas
s=\"pl-pds\">'<\/span><\/span>;\n }\n};\n\n<span class=\"pl-k\">var<\/span> p <span class=\"pl-k\">=<\/span> <span clas
s=\"pl-k\">new<\/span> <span class=\"pl-en\">Proxy<\/span>(target, handler);\np() <span class=\"pl-k\">===<\/span> <span
class=\"pl-s\"><span class=\"pl-pds\">'<\/span>I am the proxy<span class=\"pl-pds\">'<\/span><\/span>;<\/pre><\/div>\n\
n<p>There are traps available for all of the runtime-level meta-operations:<\/p>\n\n<div class=\"highlight highlight-sou
rce-js\"><pre><span class=\"pl-k\">var<\/span> handler <span class=\"pl-k\">=<\/span>\n{\n get<span class=\"pl-k\">:<\/
span>...,\n set<span class=\"pl-k\">:<\/span>...,\n has<span class=\"pl-k\">:<\/span>...,\n deleteProperty<span class
=\"pl-k\">:<\/span>...,\n apply<span class=\"pl-k\">:<\/span>...,\n construct<span class=\"pl-k\">:<\/span>...,\n get
OwnPropertyDescriptor<span class=\"pl-k\">:<\/span>...,\n defineProperty<span class=\"pl-k\">:<\/span>...,\n getProtot
ypeOf<span class=\"pl-k\">:<\/span>...,\n setPrototypeOf<span class=\"pl-k\">:<\/span>...,\n enumerate<span class=\"pl
-k\">:<\/span>...,\n ownKeys<span class=\"pl-k\">:<\/span>...,\n preventExtensions<span class=\"pl-k\">:<\/span>...,\n
isExtensible<span class=\"pl-k\">:<\/span>...\n}<\/pre><\/div>\n\n<h3><a class=\"anchor\" href=\"https:\/\/github.com\
/lukehoban\/es6features#symbols\"><span class=\"octicon octicon-link\"><\/span><\/a>Symbols<\/h3>\n\n<p>Symbols enable a
ccess control for object state. Symbols allow properties to be keyed by either <code>string<\/code> (as in ES5) or <cod
e>symbol<\/code>. Symbols are a new primitive type. Optional <code>description<\/code> parameter used in debugging - bu
t is not part of identity. Symbols are unique (like gensym), but not private since they are exposed via reflection feat
ures like <code>Object.getOwnPropertySymbols<\/code>.<\/p>\n\n<div class=\"highlight highlight-source-js\"><pre><span cl
ass=\"pl-k\">var<\/span> MyClass <span class=\"pl-k\">=<\/span> (<span class=\"pl-k\">function<\/span>() {\n\n <span cl
ass=\"pl-c\">\/\/ module scoped symbol<\/span>\n <span class=\"pl-k\">var<\/span> key <span class=\"pl-k\">=<\/span> Sy
mbol(<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>key<span class=\"pl-pds\">\"<\/span><\/span>);\n\n <span cla
ss=\"pl-k\">function<\/span> <span class=\"pl-en\">MyClass<\/span>(<span class=\"pl-smi\">privateData<\/span>) {\n <s
pan class=\"pl-v\">this<\/span>[key] <span class=\"pl-k\">=<\/span> privateData;\n }\n\n <span class=\"pl-c1\">MyClass
<\/span>.<span class=\"pl-c1\">prototype<\/span> <span class=\"pl-k\">=<\/span> {\n <span class=\"pl-en\">doStuff<\/s
pan><span class=\"pl-k\">:<\/span> <span class=\"pl-k\">function<\/span>() {\n ... <span class=\"pl-v\">this<\/span
>[key] ...\n }\n };\n\n <span class=\"pl-k\">return<\/span> MyClass;\n})();\n\n<span class=\"pl-k\">var<\/span> c <
span class=\"pl-k\">=<\/span> <span class=\"pl-k\">new<\/span> <span class=\"pl-en\">MyClass<\/span>(<span class=\"pl-s\
"><span class=\"pl-pds\">\"<\/span>hello<span class=\"pl-pds\">\"<\/span><\/span>)\nc[<span class=\"pl-s\"><span class=\
"pl-pds\">\"<\/span>key<span class=\"pl-pds\">\"<\/span><\/span>] <span class=\"pl-k\">===<\/span> <span class=\"pl-c1\"
>undefined<\/span><\/pre><\/div>\n\n<h3><a class=\"anchor\" href=\"https:\/\/github.com\/lukehoban\/es6features#subclass
able-built-ins\"><span class=\"octicon octicon-link\"><\/span><\/a>Subclassable Built-ins<\/h3>\n\n<p>In ES6, built-ins
like <code>Array<\/code>, <code>Date<\/code> and DOM <code>Element<\/code>s can be subclassed.<\/p>\n\n<p>Object constru
ction for a function named <code>Ctor<\/code> now uses two-phases (both virtually dispatched):<\/p>\n\n<ul><li>Call <cod
e>Ctor[@@create]<\/code> to allocate the object, installing any special behavior<\/li>\n<li>Invoke constructor on new in
stance to initialize<\/li>\n<\/ul><p>The known <code>@@create<\/code> symbol is available via <code>Symbol.create<\/code
>. Built-ins now expose their <code>@@create<\/code> explicitly.<\/p>\n\n<div class=\"highlight highlight-source-js\"><
pre><span class=\"pl-c\">\/\/ Pseudo-code of Array<\/span>\n<span class=\"pl-k\">class<\/span> <span class=\"pl-en\">Arr
ay<\/span> {\n <span class=\"pl-en\">constructor<\/span>(...<span class=\"pl-smi\">args<\/span>) { <span class=\"pl-c
\">\/* ... *\/<\/span> }\n <span class=\"pl-k\">static<\/span> [Symbol.create]() {\n <span class=\"pl-c\">\/\/
Install special [[DefineOwnProperty]]<\/span>\n <span class=\"pl-c\">\/\/ to magically update 'length'<\/span>\n
}\n}\n\n<span class=\"pl-c\">\/\/ User code of Array subclass<\/span>\n<span class=\"pl-k\">class<\/span> <span clas
s=\"pl-en\">MyArray<\/span> <span class=\"pl-k\">extends<\/span> <span class=\"pl-en\">Array<\/span> {\n <span class=
\"pl-en\">constructor<\/span>(...<span class=\"pl-smi\">args<\/span>) { <span class=\"pl-v\">super<\/span>(...args); }\n
}\n\n<span class=\"pl-c\">\/\/ Two-phase 'new':<\/span>\n<span class=\"pl-c\">\/\/ 1) Call @@create to allocate object<\
/span>\n<span class=\"pl-c\">\/\/ 2) Invoke constructor on new instance<\/span>\n<span class=\"pl-k\">var<\/span> arr <s
pan class=\"pl-k\">=<\/span> <span class=\"pl-k\">new<\/span> <span class=\"pl-en\">MyArray<\/span>();\narr[<span class=
\"pl-c1\">1<\/span>] <span class=\"pl-k\">=<\/span> <span class=\"pl-c1\">12<\/span>;\narr.<span class=\"pl-c1\">length<
\/span> <span class=\"pl-k\">==<\/span> <span class=\"pl-c1\">2<\/span><\/pre><\/div>\n\n<h3><a class=\"anchor\" href=\"
https:\/\/github.com\/lukehoban\/es6features#math--number--string--array--object-apis\"><span class=\"octicon octicon-li
nk\"><\/span><\/a>Math + Number + String + Array + Object APIs<\/h3>\n\n<p>Many new library additions, including core Ma
th libraries, Array conversion helpers, String helpers, and Object.assign for copying.<\/p>\n\n<div class=\"highlight hi
ghlight-source-js\"><pre><span class=\"pl-c1\">Number<\/span>.EPSILON\n<span class=\"pl-c1\">Number<\/span>.isInteger(<s
pan class=\"pl-c1\">Infinity<\/span>) <span class=\"pl-c\">\/\/ false<\/span>\n<span class=\"pl-c1\">Number<\/span>.<spa
n class=\"pl-c1\">isNaN<\/span>(<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>NaN<span class=\"pl-pds\">\"<\/spa
n><\/span>) <span class=\"pl-c\">\/\/ false<\/span>\n\n<span class=\"pl-c1\">Math<\/span>.acosh(<span class=\"pl-c1\">3<
\/span>) <span class=\"pl-c\">\/\/ 1.762747174039086<\/span>\n<span class=\"pl-c1\">Math<\/span>.hypot(<span class=\"pl-
c1\">3<\/span>, <span class=\"pl-c1\">4<\/span>) <span class=\"pl-c\">\/\/ 5<\/span>\n<span class=\"pl-c1\">Math<\/span>
.imul(<span class=\"pl-c1\">Math<\/span>.<span class=\"pl-c1\">pow<\/span>(<span class=\"pl-c1\">2<\/span>, <span class=
\"pl-c1\">32<\/span>) <span class=\"pl-k\">-<\/span> <span class=\"pl-c1\">1<\/span>, <span class=\"pl-c1\">Math<\/span>
.<span class=\"pl-c1\">pow<\/span>(<span class=\"pl-c1\">2<\/span>, <span class=\"pl-c1\">32<\/span>) <span class=\"pl-k
\">-<\/span> <span class=\"pl-c1\">2<\/span>) <span class=\"pl-c\">\/\/ 2<\/span>\n\n<span class=\"pl-s\"><span class=\"
pl-pds\">\"<\/span>abcde<span class=\"pl-pds\">\"<\/span><\/span>.includes(<span class=\"pl-s\"><span class=\"pl-pds\">\
"<\/span>cd<span class=\"pl-pds\">\"<\/span><\/span>) <span class=\"pl-c\">\/\/ true<\/span>\n<span class=\"pl-s\"><span
class=\"pl-pds\">\"<\/span>abc<span class=\"pl-pds\">\"<\/span><\/span>.repeat(<span class=\"pl-c1\">3<\/span>) <span c
lass=\"pl-c\">\/\/ \"abcabcabc\"<\/span>\n\n<span class=\"pl-c1\">Array<\/span>.from(<span class=\"pl-c1\">document<\/sp
an>.querySelectorAll(<span class=\"pl-s\"><span class=\"pl-pds\">'<\/span>*<span class=\"pl-pds\">'<\/span><\/span>)) <s
pan class=\"pl-c\">\/\/ Returns a real Array<\/span>\n<span class=\"pl-c1\">Array<\/span>.of(<span class=\"pl-c1\">1<\/s
pan>, <span class=\"pl-c1\">2<\/span>, <span class=\"pl-c1\">3<\/span>) <span class=\"pl-c\">\/\/ Similar to new Array(.
..), but without special one-arg behavior<\/span>\n[<span class=\"pl-c1\">0<\/span>, <span class=\"pl-c1\">0<\/span>, <s
pan class=\"pl-c1\">0<\/span>].fill(<span class=\"pl-c1\">7<\/span>, <span class=\"pl-c1\">1<\/span>) <span class=\"pl-c
\">\/\/ [0,7,7]<\/span>\n[<span class=\"pl-c1\">1<\/span>, <span class=\"pl-c1\">2<\/span>, <span class=\"pl-c1\">3<\/sp
an>].<span class=\"pl-c1\">find<\/span>(x <span class=\"pl-k\">=><\/span> x <span class=\"pl-k\">==<\/span> <span cla
ss=\"pl-c1\">3<\/span>) <span class=\"pl-c\">\/\/ 3<\/span>\n[<span class=\"pl-c1\">1<\/span>, <span class=\"pl-c1\">2<\
/span>, <span class=\"pl-c1\">3<\/span>].findIndex(x <span class=\"pl-k\">=><\/span> x <span class=\"pl-k\">==<\/span
> <span class=\"pl-c1\">2<\/span>) <span class=\"pl-c\">\/\/ 1<\/span>\n[<span class=\"pl-c1\">1<\/span>, <span class=\"
pl-c1\">2<\/span>, <span class=\"pl-c1\">3<\/span>, <span class=\"pl-c1\">4<\/span>, <span class=\"pl-c1\">5<\/span>].co
pyWithin(<span class=\"pl-c1\">3<\/span>, <span class=\"pl-c1\">0<\/span>) <span class=\"pl-c\">\/\/ [1, 2, 3, 1, 2]<\/s
pan>\n[<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>a<span class=\"pl-pds\">\"<\/span><\/span>, <span class=\"p
l-s\"><span class=\"pl-pds\">\"<\/span>b<span class=\"pl-pds\">\"<\/span><\/span>, <span class=\"pl-s\"><span class=\"pl
-pds\">\"<\/span>c<span class=\"pl-pds\">\"<\/span><\/span>].entries() <span class=\"pl-c\">\/\/ iterator [0, \"a\"], [1
,\"b\"], [2,\"c\"]<\/span>\n[<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>a<span class=\"pl-pds\">\"<\/span><\/
span>, <span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>b<span class=\"pl-pds\">\"<\/span><\/span>, <span class=\"p
l-s\"><span class=\"pl-pds\">\"<\/span>c<span class=\"pl-pds\">\"<\/span><\/span>].keys() <span class=\"pl-c\">\/\/ iter
ator 0, 1, 2<\/span>\n[<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>a<span class=\"pl-pds\">\"<\/span><\/span>,
<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>b<span class=\"pl-pds\">\"<\/span><\/span>, <span class=\"pl-s\">
<span class=\"pl-pds\">\"<\/span>c<span class=\"pl-pds\">\"<\/span><\/span>].values() <span class=\"pl-c\">\/\/ iterator
\"a\", \"b\", \"c\"<\/span>\n\n<span class=\"pl-c1\">Object<\/span>.assign(Point, { origin<span class=\"pl-k\">:<\/span
> <span class=\"pl-k\">new<\/span> <span class=\"pl-en\">Point<\/span>(<span class=\"pl-c1\">0<\/span>,<span class=\"pl-
c1\">0<\/span>) })<\/pre><\/div>\n\n<h3><a class=\"anchor\" href=\"https:\/\/github.com\/lukehoban\/es6features#binary-a
nd-octal-literals\"><span class=\"octicon octicon-link\"><\/span><\/a>Binary and Octal Literals<\/h3>\n\n<p>Two new nume
ric literal forms are added for binary (<code>b<\/code>) and octal (<code>o<\/code>).<\/p>\n\n<div class=\"highlight hig
hlight-source-js\"><pre><span class=\"pl-c1\">0b111110111<\/span> <span class=\"pl-k\">===<\/span> <span class=\"pl-c1\"
>503<\/span> <span class=\"pl-c\">\/\/ true<\/span>\n<span class=\"pl-c1\">0o767<\/span> <span class=\"pl-k\">===<\/span
> <span class=\"pl-c1\">503<\/span> <span class=\"pl-c\">\/\/ true<\/span><\/pre><\/div>\n\n<h3><a class=\"anchor\" href
=\"https:\/\/github.com\/lukehoban\/es6features#promises\"><span class=\"octicon octicon-link\"><\/span><\/a>Promises<\/
h3>\n\n<p>Promises are a library for asynchronous programming. Promises are a first class representation of a value tha
t may be made available in the future. Promises are used in many existing JavaScript libraries.<\/p>\n\n<div class=\"hi
ghlight highlight-source-js\"><pre><span class=\"pl-k\">function<\/span> <span class=\"pl-en\">timeout<\/span>(<span cla
ss=\"pl-smi\">duration<\/span> <span class=\"pl-k\">=<\/span> <span class=\"pl-c1\">0<\/span>) {\n <span class=\"pl-k
\">return<\/span> <span class=\"pl-k\">new<\/span> <span class=\"pl-en\">Promise<\/span>((<span class=\"pl-smi\">resolve
<\/span>, <span class=\"pl-smi\">reject<\/span>)<span class=\"pl-k\"> =><\/span> {\n <span class=\"pl-c1\">set
Timeout<\/span>(resolve, duration);\n })\n}\n\n<span class=\"pl-k\">var<\/span> p <span class=\"pl-k\">=<\/span> time
out(<span class=\"pl-c1\">1000<\/span>).then(()<span class=\"pl-k\"> =><\/span> {\n <span class=\"pl-k\">return<\/
span> timeout(<span class=\"pl-c1\">2000<\/span>);\n}).then(()<span class=\"pl-k\"> =><\/span> {\n <span class=\"p
l-k\">throw<\/span> <span class=\"pl-k\">new<\/span> <span class=\"pl-en\">Error<\/span>(<span class=\"pl-s\"><span clas
s=\"pl-pds\">\"<\/span>hmm<span class=\"pl-pds\">\"<\/span><\/span>);\n}).catch(err <span class=\"pl-k\">=><\/span> {
\n <span class=\"pl-k\">return<\/span> Promise.<span class=\"pl-c1\">all<\/span>([timeout(<span class=\"pl-c1\">100<\
/span>), timeout(<span class=\"pl-c1\">200<\/span>)]);\n})<\/pre><\/div>\n\n<h3><a class=\"anchor\" href=\"https:\/\/git
hub.com\/lukehoban\/es6features#reflect-api\"><span class=\"octicon octicon-link\"><\/span><\/a>Reflect API<\/h3>\n\n<p>
Full reflection API exposing the runtime-level meta-operations on objects. This is effectively the inverse of the Proxy
API, and allows making calls corresponding to the same meta-operations as the proxy traps. Especially useful for imple
menting proxies.<\/p>\n\n<div class=\"highlight highlight-source-js\"><pre><span class=\"pl-c\">\/\/ No sample yet<\/spa
n><\/pre><\/div>\n\n<h3><a class=\"anchor\" href=\"https:\/\/github.com\/lukehoban\/es6features#tail-calls\"><span class
=\"octicon octicon-link\"><\/span><\/a>Tail Calls<\/h3>\n\n<p>Calls in tail-position are guaranteed to not grow the stac
k unboundedly. Makes recursive algorithms safe in the face of unbounded inputs.<\/p>\n\n<div class=\"highlight highligh
t-source-js\"><pre><span class=\"pl-k\">function<\/span> <span class=\"pl-en\">factorial<\/span>(<span class=\"pl-smi\">
n<\/span>, <span class=\"pl-smi\">acc<\/span> <span class=\"pl-k\">=<\/span> <span class=\"pl-c1\">1<\/span>) {\n <sp
an class=\"pl-s\"><span class=\"pl-pds\">'<\/span>use strict<span class=\"pl-pds\">'<\/span><\/span>;\n <span class=\
"pl-k\">if<\/span> (n <span class=\"pl-k\"><=<\/span> <span class=\"pl-c1\">1<\/span>) <span class=\"pl-k\">return<\/
span> acc;\n <span class=\"pl-k\">return<\/span> factorial(n <span class=\"pl-k\">-<\/span> <span class=\"pl-c1\">1<\
/span>, n <span class=\"pl-k\">*<\/span> acc);\n}\n\n<span class=\"pl-c\">\/\/ Stack overflow in most implementations to
day,<\/span>\n<span class=\"pl-c\">\/\/ but safe on arbitrary inputs in ES6<\/span>\nfactorial(<span class=\"pl-c1\">100
000<\/span>)<\/pre><\/div>\n", "2016-05-17 09:58:58", "2016-05-17 09:58:58", "", "", 9, "github.com", null, null, 2]:
SQLSTATE[HY000]: General error: 1366 Incorrect string value: '\xF0\xA0\xAE\xB7<s...' for column 'content' at row 1
[PDOException]
SQLSTATE[HY000]: General error: 1366 Incorrect string value: '\xF0\xA0\xAE\xB7<s...' for column 'content' at row 1
I've extracted the entry from the json file :
{
"id": "130",
"0": "130",
"title": "Read Understanding ECMAScript 6 | Leanpub",
"1": "Read Understanding ECMAScript 6 | Leanpub",
"url": "https:\/\/leanpub.com\/understandinges6\/read",
"2": "https:\/\/leanpub.com\/understandinges6\/read",
"is_read": "0",
"3": "0",
"is_fav": "0",
"4": "0",
"content": "\n<h2>Introduction<\/h2>\n\n<p>The JavaScript core language features are defined in a standard called ECMA-262. The language defined in this standard is called ECMAScript, of which the JavaScript in the browser and Node.js environments are a superset. While browsers and Node.js may add more capabilities through additional objects and methods, the core of the language remains as defined in ECMAScript, which is why the ongoing development of ECMA-262 is vital to the success of JavaScript as a whole.<\/p>\n\n<p>In 2007, JavaScript was at a crossroads. The popularity of Ajax was ushering in a new age of dynamic web applications while JavaScript hadn\u2019t changed since the third edition of ECMA-262 was published in 1999. TC-39, the committee responsible for driving the ECMAScript process, put together a large draft specification for ECMAScript 4. ECMAScript 4 was massive in scope, introducing changes both small and large to the language. Language features included new syntax, modules, classes, classical inheritance, private object members, optional type annotations, and more.<\/p>\n\n<p>The scope of the ECMAScript 4 changes caused a rift to form in TC-39, with some members feeling that the fourth edition was trying to accomplish too much. A group of leaders from Yahoo, Google, and Microsoft came up with an alternate proposal for the next version of ECMAScript that they initially called ECMAScript 3.1. The \u201c3.1\u201d was intended to show that this was an incremental change to the existing standard.<\/p>\n\n<p>ECMAScript 3.1 introduced very few syntax changes, instead focusing on property attributes, native JSON support, and adding methods to already-existing objects. Although there was an early attempt to reconcile ECMAScript 3.1 and ECMAScript 4, this ultimately failed as the two camps had difficulty with the very different perspectives on how the language should grow.<\/p>\n\n<p>In 2008, Brendan Eich, the creator of JavaScript, announced that TC-39 would focus its efforts on standardizing ECMAScript 3.1. They would table the major syntax and feature changes of ECMAScript 4 until after the next version of ECMAScript was standardized, and all members of the committee would work to bring the best pieces of ECMAScript 3.1 and 4 together after that point into an effort initially nicknamed ECMAScript Harmony.<\/p>\n\n<p>ECMAScript 3.1 was eventually standardized as the fifth edition of ECMA-262, also described as ECMAScript 5. The committee never released an ECMAScript 4 standard to avoid confusion with the now-defunct effort of the same name. Work then began on ECMAScript Harmony, with ECMAScript 6 being the first standard released in this new \u201charmonious\u201d spirit.<\/p>\n\n<p>ECMAScript 6 reached feature complete status in 2014. The features vary widely from completely new objects and patterns to syntax changes to new methods on existing objects. The exciting thing about ECMAScript 6 is that all of these changes are geared towards problems that developers are actually facing. And while it will still take time for adoption and implementation to reach the point where ECMAScript 6 is the minimum that developers can expect, there\u2019s a lot to be gained from a good understanding of what the future of JavaScript looks like.<\/p>\n\n<h3>Browser and Node.js Compatibility<\/h3>\n\n<p>Many JavaScript environments, such as web browsers and Node.js, are actively working on implementing ECMAScript 6. This book does not attempt to address to inconsistencies between implementations and instead focuses on what the specification defines as the correct behavior. As such, it\u2019s possible that your JavaScript environment may not conform to the behavior described in this book.<\/p>\n\n<h3>Who This Book is For<\/h3>\n\n<p>This book is intended as a guide for those who are already familiar with JavaScript and ECMAScript 5. While a deep understanding of the language isn\u2019t necessary to use this book, it is helpful in understanding the differences between ECMAScript 5 and 6. In particular, this book is aimed at intermediate-to-advanced JavaScript developers (both browser and Node.js environments) who want to learn about the future of the language.<\/p>\n\n<p>This book is not for beginners who have never written JavaScript. You will need to have a good basic understanding of the language to make use of this book.<\/p>\n\n<h3>Overview<\/h3>\n\n<p><strong>Chapter 1: The Basics<\/strong> introduces the smallest changes in the language. These are the new features that don\u2019t necessarily introduce syntax changes, but rather are incremental changes on top of ECMAScript 5.<\/p>\n\n<p><strong>Chapter 2: Functions<\/strong> discusses the various changes to functions. This includes the arrow function form, default parameters, rest parameters, and more.<\/p>\n\n<p><strong>Chapter 3: Objects<\/strong> explains the changes to how objects are created, modified, and used. Topics include changes to object literal syntax, and new reflection methods.<\/p>\n\n<p><strong>Chapter 4: Symbols<\/strong> introduces the concept of symbols, a new way to define properties. Symbols are a new primitive type that can be used to obscure (but not hide) object properties and methods.<\/p>\n\n<p><strong>Chapter 5: Arrays<\/strong> details the changes to native arrays and the interesting new ways they can be used in JavaScript.<\/p>\n\n<p><strong>Chapter 6: Collections<\/strong> details the new collection types of <code>Set<\/code>, <code>WeakSet<\/code>, <code>Map<\/code>, and <code>WeakMap<\/code>. These types expand on the usefulness of arrays by adding semantics, de-duping, and memory management designed specifically for JavaScript.<\/p>\n\n<p><strong>Chapter 7: Classes<\/strong> introduces the first formal concept of classes in JavaScript. Often a point of confusion for those coming from other languages, the addition of class syntax in JavaScript makes the language more approachable to others and more concise for enthusiasts.<\/p>\n\n<p><strong>Chapter 8: Iterators and Generators<\/strong> discusses the addition of iterators and generators to the language. These features allow you to work with collections of data in powerful ways that were not possible in previous versions of JavaScript.<\/p>\n\n<p><strong>Chapter 9: Proxies<\/strong> discusses the new proxy object that allows you to intercept every operation performed on an object. Proxies give developers unprecedented control over objects and, as such, unlimited possibilities for defining new interaction patterns.<\/p>\n\n<p><strong>Chapter 10: Promises<\/strong> introduces promises as a new part of the language. Promises were a grassroots effort that eventually took off and gained in popularity due to extensive library support. ECMAScript 6 formalizes promises and makes them available by default.<\/p>\n\n<p><strong>Chapter 11: Modules<\/strong> details the official module format for JavaScript. The intent is that these modules can replace the numerous ad-hoc module definition formats that have appeared over the years.<\/p>\n\n<p><strong>Chapter 12: Template Strings<\/strong> discusses the new built-in templating functionality. Template strings are designed to easily create DSLs in a secure way.<\/p>\n\n<p><strong>Chapter 13: Reflection<\/strong> introduces the formalized reflection API for JavaScript. Similar to other languages, ECMAScript 6 reflection allows you to inspect objects at a granular level, even if you didn\u2019t create the object.<\/p>\n\n<h3>Help and Support<\/h3>\n\n<p>You can file issues, suggest changes, and open pull requests against this book by visiting: <a href=\"https:\/\/github.com\/nzakas\/understandinges6\">https:\/\/github.com\/nzakas\/understandinges6<\/a><\/p>\n\n<p>For anything else, please send a message to the mailing list: <a href=\"http:\/\/groups.google.com\/group\/zakasbooks\">http:\/\/groups.google.com\/group\/zakasbooks<\/a>.<\/p>\n\n<h2>The Basics<\/h2>\n\n<p>ECMAScript 6 makes a large number of changes on top of ECMAScript 5. Some of the changes are larger, such as adding new types or syntax, while others are quite small, providing incremental improvements on top of the language. This chapter covers those incremental improvements that likely won\u2019t gain a lot of attention but provide some important functionality that may make certain types of problems easier to solve.<\/p>\n\n<h3>Better Unicode Support<\/h3>\n\n<p>Prior to ECMAScript 6, JavaScript strings were based solely on the idea of 16-bit character encodings. All string properties and methods, such as <code>length<\/code> and <code>charAt()<\/code>, were based around the idea that every 16-bit sequence represented a single character. ECMAScript 5 allowed JavaScript engines to decide which of two encodings to use, either UCS-2 or UTF-16 (both encodings use 16-bit <em>code units<\/em>, making all observable operations the same). While it\u2019s true that all of the world\u2019s characters used to fit into 16 bits at one point in time, that is no longer the case.<\/p>\n\n<p>Keeping within 16 bits wasn\u2019t possible for Unicode\u2019s stated goal of providing a globally unique identifier to every character in the world. These globally unique identifiers, called <em>code points<\/em>, are simply numbers starting at 0 (you might think of these as character codes, but there is subtle difference). A character encoding is responsible for encoding a code point into code units that are internally consistent. While UCS-2 had a one-to-one mapping of code point to code unit, UTF-16 is more variable.<\/p>\n\n<p>The first 2^16 code points are represented as single 16-bit code units in UTF-16. This is called the <em>Basic Multilingual Plane<\/em> (BMP). Everything beyond that range is considered to be in a <em>supplementary plane<\/em>, where the code points can no longer be represented in just 16-bits. UTF-16 solves this problem by introducing <em>surrogate pairs<\/em> in which a single code point is represented by two 16-bit code units. That means any single character in a string can be either one code unit (for BMP, total of 16 bits) or two (for supplementary plane characters, total of 32 bits).<\/p>\n\n<p>ECMAScript 5 kept all operations as working on 16-bit code units, meaning that you could get unexpected results from strings containing surrogate pairs. For example:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">text<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\"\ud842\udfb7\"<\/code><code class=\"p\">;<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">length<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ 2<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"sr\">\/^.$\/<\/code><code class=\"p\">.<\/code><code class=\"nx\">test<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ false<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">charAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">0<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ \"\"<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">charAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">1<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ \"\"<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">charCodeAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">0<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 55362<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">charCodeAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">1<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 57271<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>In this example, a single Unicode character is represented using surrogate pairs, and as such, the JavaScript string operations treat the string as having two 16-bit characters. That means <code>length<\/code> is 2, a regular expression trying to match a single character fails, and <code>charAt()<\/code> is unable to return a valid character string. The <code>charCodeAt()<\/code> method returns the appropriate 16-bit number for each code unit, but that is the closest you could get to the real value in ECMAScript 5.<\/p>\n\n<p>ECMAScript 6 enforces encoding of strings in UTF-16. Standardizing on this character encoding means that the language can now support functionality designed to work specifically with surrogate pairs.<\/p>\n\n<h4>The codePointAt() Method<\/h4>\n\n<p>The first example of fully supporting UTF-16 is the <code>codePointAt()<\/code> method, which can be used to retrieve the Unicode code point that maps to a given position in a string. This method accepts the code unit position (not the character position) and returns an integer value:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">text<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\"\ud842\udfb7a\"<\/code><code class=\"p\">;<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">charCodeAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">0<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 55362<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">charCodeAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">1<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 57271<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">charCodeAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">2<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 97<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">codePointAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">0<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 134071<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">codePointAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">1<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 57271<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">codePointAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">2<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 97<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>The <code>codePointAt()<\/code> method works in the same manner as <code>charCodeAt()<\/code> except for non-BMP characters. The first character in <code>text<\/code> is non-BMP and is therefore comprised of two code units, meaning the entire length of the string is 3 rather than 2. The <code>charAt()<\/code> method returns only the first code unit for position 0 whereas <code>codePointAt()<\/code> returns the full code point even though it spans multiple code units. Both methods return the same value for positions 1 (the second code unit of the first character) and 2 (the <code>\"a\"<\/code>).<\/p>\n\n<p>This method is the easiest way to determine if a given character is represented by one or two code points:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">function<\/code> <code class=\"nx\">is32Bit<\/code><code class=\"p\">(<\/code><code class=\"nx\">c<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"nx\">c<\/code><code class=\"p\">.<\/code><code class=\"nx\">codePointAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">0<\/code><code class=\"p\">)<\/code> <code class=\"o\">><\/code> <code class=\"mh\">0xFFFF<\/code><code class=\"p\">;<\/code>\n<code class=\"p\">}<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">is32Bit<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"\ud842\udfb7\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">is32Bit<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"a\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ false<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>The upper bound of 16-bit characters is represented in hexadecimal as <code>FFFF<\/code>, so any code point above that number must be represented by two code units.<\/p>\n\n<h4>String.fromCodePoint()<\/h4>\n\n<p>When ECMAScript provides a way to do something, it also tends to provide a way to do the reverse. You can use <code>codePointAt()<\/code> to retrieve the code point for a character in a string while <code>String.fromCodePoint()<\/code> produces a single-character string for the given code point. For example:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nb\">String<\/code><code class=\"p\">.<\/code><code class=\"nx\">fromCodePoint<\/code><code class=\"p\">(<\/code><code class=\"mi\">134071<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ \"\ud842\udfb7\"<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>You can think of <code>String.fromCodePoint()<\/code> as a more complete version of <code>String.fromCharCode()<\/code>. Each method has the same result for all characters in the BMP; the only difference is with characters outside of that range.<\/p>\n\n<h4>Escaping Non-BMP Characters<\/h4>\n\n<p>ECMAScript 5 allows strings to contain 16-bit Unicode characters represented by an <em>escape sequence<\/em>. The escape sequence is the <code>\\u<\/code> followed by four hexadecimal values. For example, the escape sequence <code>\\u0061<\/code> represents the letter <code>\"a\"<\/code>:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"\\u0061\"<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ \"a\"<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>If you try to use an escape sequence with a number past <code>FFFF<\/code>, the upper bound of the BMP, then you can get some surprising results:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"\\u20BB7\"<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ \"7\"<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>Since Unicode escape sequences were defined as always having exactly four hexadecimal characters, ECMAScript evaluates <code>\\u20BB7<\/code> as two characters: <code>\\u20BB<\/code> and <code>\"7\"<\/code>. The first character is unprintable and the second is the number 7.<\/p>\n\n<p>ECMAScript 6 solves this problem by introducing an extended Unicode escape sequence where the hexadecimal numbers are contained within curly braces. This allows any number of hexadecimal characters to specify a single character:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"\\u{20BB7}\"<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ \"\ud842\udfb7\"<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>Using the extended escape sequence, the correct character is contained in the string.<\/p>\n\n<h4>The normalize() Method<\/h4>\n\n<p>Another interesting aspect of Unicode is that different characters may be considered equivalent for the purposes of sorting or other comparison-based operations. There are two ways to define these relationships. First, <em>canonical equivalence<\/em> means that two sequences of code points are considered interchangeable in all respects. That even means that a combination of two characters can be canonically equivalent to one character. The second relationship is <em>compatibility<\/em>, meaning that two sequences of code points having different appearances but can be used interchangeably in certain situations.<\/p>\n\n<p>The important thing to understand is that due to these relationships, it\u2019s possible to have two strings that represent fundamentally the same text and yet have them contain different code point sequences. For example, the character \u201c\u00e6\u201d and the string \u201cae\u201d may be used interchangeably even though they are different code points. These two strings would therefore be unequal in JavaScript unless they are normalized in some way.<\/p>\n\n<p>ECMAScript 6 supports the four Unicode normalization forms through a new <code>normalize()<\/code> method on strings. This method optionally accepts a single parameter, one of <code>\"NFC\"<\/code> (default), <code>\"NFD\"<\/code>, <code>\"NFKC\"<\/code>, or <code>\"NFKD\"<\/code>. It\u2019s beyond the scope of this book to explain the differences between these four forms. Just keep in mind that, in order to be used, you must normalize both strings that are being compared to the same form. For example:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">normalized<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">values<\/code><code class=\"p\">.<\/code><code class=\"nx\">map<\/code><code class=\"p\">(<\/code><code class=\"kd\">function<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">normalize<\/code><code class=\"p\">();<\/code>\n<code class=\"p\">});<\/code>\n\n<code class=\"nx\">normalized<\/code><code class=\"p\">.<\/code><code class=\"nx\">sort<\/code><code class=\"p\">(<\/code><code class=\"kd\">function<\/code><code class=\"p\">(<\/code><code class=\"nx\">first<\/code><code class=\"p\">,<\/code> <code class=\"nx\">second<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">if<\/code> <code class=\"p\">(<\/code><code class=\"nx\">first<\/code> <code class=\"o\"><<\/code> <code class=\"nx\">second<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"o\">-<\/code><code class=\"mi\">1<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">else<\/code> <code class=\"k\">if<\/code> <code class=\"p\">(<\/code><code class=\"nx\">first<\/code> <code class=\"o\">===<\/code> <code class=\"nx\">second<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"mi\">0<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">else<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"mi\">1<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code>\n<code class=\"p\">});<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>In this code, the strings in a <code>values<\/code> array are converted into a normalized form so that the array can be sorted appropriately. You can accomplish the sort on the original array by calling <code>normalize()<\/code> as part of the comparator:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"nx\">values<\/code><code class=\"p\">.<\/code><code class=\"nx\">sort<\/code><code class=\"p\">(<\/code><code class=\"kd\">function<\/code><code class=\"p\">(<\/code><code class=\"nx\">first<\/code><code class=\"p\">,<\/code> <code class=\"nx\">second<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"kd\">var<\/code> <code class=\"nx\">firstNormalized<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">first<\/code><code class=\"p\">.<\/code><code class=\"nx\">normalize<\/code><code class=\"p\">(),<\/code>\n <code class=\"nx\">secondNormalized<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">second<\/code><code class=\"p\">.<\/code><code class=\"nx\">normalize<\/code><code class=\"p\">();<\/code>\n\n <code class=\"k\">if<\/code> <code class=\"p\">(<\/code><code class=\"nx\">firstNormalized<\/code> <code class=\"o\"><<\/code> <code class=\"nx\">secondNormalized<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"o\">-<\/code><code class=\"mi\">1<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">else<\/code> <code class=\"k\">if<\/code> <code class=\"p\">(<\/code><code class=\"nx\">firstNormalized<\/code> <code class=\"o\">===<\/code> <code class=\"nx\">secondNormalized<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"mi\">0<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">else<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"mi\">1<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code>\n<code class=\"p\">});<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>Once again, the most important thing to remember is that both values must be normalized in the same way. These examples have used the default, NFC, but you can just as easily specify one of the others:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"nx\">values<\/code><code class=\"p\">.<\/code><code class=\"nx\">sort<\/code><code class=\"p\">(<\/code><code class=\"kd\">function<\/code><code class=\"p\">(<\/code><code class=\"nx\">first<\/code><code class=\"p\">,<\/code> <code class=\"nx\">second<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"kd\">var<\/code> <code class=\"nx\">firstNormalized<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">first<\/code><code class=\"p\">.<\/code><code class=\"nx\">normalize<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"NFD\"<\/code><code class=\"p\">),<\/code>\n <code class=\"nx\">secondNormalized<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">second<\/code><code class=\"p\">.<\/code><code class=\"nx\">normalize<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"NFD\"<\/code><code class=\"p\">);<\/code>\n\n <code class=\"k\">if<\/code> <code class=\"p\">(<\/code><code class=\"nx\">firstNormalized<\/code> <code class=\"o\"><<\/code> <code class=\"nx\">secondNormalized<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"o\">-<\/code><code class=\"mi\">1<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">else<\/code> <code class=\"k\">if<\/code> <code class=\"p\">(<\/code><code class=\"nx\">firstNormalized<\/code> <code class=\"o\">===<\/code> <code class=\"nx\">secondNormalized<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"mi\">0<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">else<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"mi\">1<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code>\n<code class=\"p\">});<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>If you\u2019ve never worried about Unicode normalization before, then you probably won\u2019t have much use for this method. However, knowing that it is available will help should you ever end up working on an internationalized application.<\/p>\n\n<h4>The Regular Expression u Flag<\/h4>\n\n<p>Many common string operations are accomplished by using regular expressions. However, as noted earlier, regular expressions also work on the basis of 16-bit code units each representing a single character. That\u2019s why the single character match in the earlier example didn\u2019t work. To address this problem, ECMAScript 6 defines a new flag for regular expressions: <code>u<\/code> for \u201cUnicode\u201d.<\/p>\n\n<p>When a regular expression has the <code>u<\/code> flag set, it switches modes to work on characters and not code units. That means the regular expression will no longer get confused about surrogate pairs in strings and can behave as expected. For example:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">text<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\"\ud842\udfb7\"<\/code><code class=\"p\">;<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">length<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ 2<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"sr\">\/^.$\/<\/code><code class=\"p\">.<\/code><code class=\"nx\">test<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ false<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"err\">\/^.$\/u.test(text)); \/\/ true<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>Adding the <code>u<\/code> flag allows the regular expression to correctly match the string by characters. Unfortunately, ECMAScript 6 does not have a way of determining how many code points are present in a string; fortunately, regular expressions can be used to figure it out:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">function<\/code> <code class=\"nx\">codePointLength<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"kd\">var<\/code> <code class=\"nx\">result<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">match<\/code><code class=\"p\">(<\/code><code class=\"err\">\/[\\s\\S]\/gu);<\/code>\n <code class=\"k\">return<\/code> <code class=\"nx\">result<\/code> <code class=\"o\">?<\/code> <code class=\"nx\">result<\/code><code class=\"p\">.<\/code><code class=\"nx\">length<\/code> <code class=\"o\">:<\/code> <code class=\"mi\">0<\/code><code class=\"p\">;<\/code>\n<code class=\"p\">}<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">codePointLength<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"abc\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 3<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">codePointLength<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"\ud842\udfb7bc\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 3<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>The regular expression in this example matches both whitespace and non-whitespace characters, and is applied globally with Unicode enabled. The <code>result<\/code> contains an array of matches when there\u2019s at least one match, so the array length ends up being the number of code points in the string.<\/p>\n\n<p>Since the <code>u<\/code> flag is a syntax change, attempting to use it in non-compliant JavaScript engines means a syntax error is thrown. The safest way to determine if the <code>u<\/code> flag is supported is with a function:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">function<\/code> <code class=\"nx\">hasRegExpU<\/code><code class=\"p\">()<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">try<\/code> <code class=\"p\">{<\/code>\n <code class=\"kd\">var<\/code> <code class=\"nx\">pattern<\/code> <code class=\"o\">=<\/code> <code class=\"k\">new<\/code> <code class=\"nb\">RegExp<\/code><code class=\"p\">(<\/code><code class=\"s2\">\".\"<\/code><code class=\"p\">,<\/code> <code class=\"s2\">\"u\"<\/code><code class=\"p\">);<\/code>\n <code class=\"k\">return<\/code> <code class=\"kc\">true<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">catch<\/code> <code class=\"p\">(<\/code><code class=\"nx\">ex<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"kc\">false<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code>\n<code class=\"p\">}<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>This function uses the <code>RegExp<\/code> constructor to pass in the <code>u<\/code> flag as an argument. This is valid syntax even in older JavaScript engines, however, the constructor will throw an error if <code>u<\/code> isn\u2019t supported.<\/p>\n\n<h3>Other String Changes<\/h3>\n\n<p>JavaScript strings have always lagged behind similar features of other languages. It was only in ECMAScript 5 that strings finally gained a <code>trim()<\/code> method, and ECMAScript 6 continues extending strings with new functionality.<\/p>\n\n<h4>includes(), startsWith(), endsWith()<\/h4>\n\n<p>Developers have used <code>indexOf()<\/code> as a way to identify strings inside of other strings since JavaScript was first introduced. ECMAScript 6 adds three new methods whose purpose is to identify strings inside of other strings:<\/p>\n\n<ul><li>\n<code>includes()<\/code> - returns true if the given text is found anywhere within the string or false if not.<\/li>\n <li>\n<code>startsWith()<\/code> - returns true if the given text is found at the beginning of the string or false if not.<\/li>\n <li>\n<code>endsWith()<\/code> - returns true if the given text is found at the end of the string or false if not.<\/li>\n<\/ul><p>Each of these methods accepts two arguments: the text to search for and an optional location from which to start the search. When the second argument is omitted, <code>includes()<\/code> and <code>startsWith()<\/code> start search from the beginning of the string while <code>endsWith()<\/code> starts from the end. In effect, the second argument results in less of the string being searched. Here are some examples:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">msg<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\"Hello world!\"<\/code><code class=\"p\">;<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">msg<\/code><code class=\"p\">.<\/code><code class=\"nx\">startsWith<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"Hello\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">msg<\/code><code class=\"p\">.<\/code><code class=\"nx\">endsWith<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"!\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">msg<\/code><code class=\"p\">.<\/code><code class=\"nx\">includes<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"o\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">msg<\/code><code class=\"p\">.<\/code><code class=\"nx\">startsWith<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"o\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ false<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">msg<\/code><code class=\"p\">.<\/code><code class=\"nx\">endsWith<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"world!\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">msg<\/code><code class=\"p\">.<\/code><code class=\"nx\">includes<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"x\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ false<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">msg<\/code><code class=\"p\">.<\/code><code class=\"nx\">startsWith<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"o\"<\/code><code class=\"p\">,<\/code> <code class=\"mi\">4<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">msg<\/code><code class=\"p\">.<\/code><code class=\"nx\">endsWith<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"o\"<\/code><code class=\"p\">,<\/code> <code class=\"mi\">8<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">msg<\/code><code class=\"p\">.<\/code><code class=\"nx\">includes<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"o\"<\/code><code class=\"p\">,<\/code> <code class=\"mi\">8<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ false<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>These three methods make it much easier to identify substrings without needing to worry about identifying their exact position.<\/p>\n\n<h4>repeat()<\/h4>\n\n<p>ECMAScript 6 also adds a <code>repeat()<\/code> method to strings. This method accepts a single argument, which is the number of times to repeat the string, and returns a new string that has the original string repeated the specified number of times. For example:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"x\"<\/code><code class=\"p\">.<\/code><code class=\"nx\">repeat<\/code><code class=\"p\">(<\/code><code class=\"mi\">3<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ \"xxx\"<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"hello\"<\/code><code class=\"p\">.<\/code><code class=\"nx\">repeat<\/code><code class=\"p\">(<\/code><code class=\"mi\">2<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ \"hellohello\"<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"abc\"<\/code><code class=\"p\">.<\/code><code class=\"nx\">repeat<\/code><code class=\"p\">(<\/code><code class=\"mi\">4<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ \"abcabcabcabc\"<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>This method is really a convenience function above all else, which can be especially useful when dealing with text manipulation. One example where this functionality comes in useful is with code formatting utilities where you need to create indentation levels:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"c1\">\/\/ indent using a specified number of spaces<\/code>\n<code class=\"kd\">var<\/code> <code class=\"nx\">indent<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\" \"<\/code><code class=\"p\">.<\/code><code class=\"nx\">repeat<\/code><code class=\"p\">(<\/code><code class=\"nx\">size<\/code><code class=\"p\">),<\/code>\n <code class=\"nx\">indentLevel<\/code> <code class=\"o\">=<\/code> <code class=\"mi\">0<\/code><code class=\"p\">;<\/code>\n\n<code class=\"c1\">\/\/ whenever you increase the indent<\/code>\n<code class=\"kd\">var<\/code> <code class=\"nx\">newIndent<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">indent<\/code><code class=\"p\">.<\/code><code class=\"nx\">repeat<\/code><code class=\"p\">(<\/code><code class=\"o\">++<\/code><code class=\"nx\">indentLevel<\/code><code class=\"p\">);<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<h3>Other Regular Expression Changes<\/h3>\n\n<p>Regular expressions are an important part of working with strings in JavaScript, and like many parts of the language, haven\u2019t really changed very much in recent versions. ECMAScript 6, however, made several improvements to regular expressions to go along with the updates to strings.<\/p>\n\n<h4>The Regular Expression y Flag<\/h4>\n\n<p>ECMAScript 6 standardized the <code>y<\/code> flag after it had been implemented in Firefox as a proprietary extension to regular expressions. The <code>y<\/code> (sticky) flag indicates that the next match should be made starting with the value of <code>lastIndex<\/code> on the regular expression.<\/p>\n\n<p>The <code>lastIndex<\/code> property indicates the position at which to start the match of a string and is set to <code>0<\/code> by default, meaning matches always start at the beginning of a string. You can, however, overwrite <code>lastIndex<\/code> to have it start from somewhere else:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">pattern<\/code> <code class=\"o\">=<\/code> <code class=\"sr\">\/hello\\d\\s?\/g<\/code><code class=\"p\">,<\/code>\n <code class=\"nx\">text<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\"hello1 hello2 hello3\"<\/code><code class=\"p\">,<\/code>\n <code class=\"nx\">result<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">exec<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">);<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">result<\/code><code class=\"p\">[<\/code><code class=\"mi\">0<\/code><code class=\"p\">]);<\/code> <code class=\"c1\">\/\/ \"hello1 \"<\/code>\n\n<code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">lastIndex<\/code> <code class=\"o\">=<\/code> <code class=\"mi\">7<\/code><code class=\"p\">;<\/code>\n<code class=\"nx\">result<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">exec<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">);<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">result<\/code><code class=\"p\">[<\/code><code class=\"mi\">0<\/code><code class=\"p\">]);<\/code> <code class=\"c1\">\/\/ \"hello2 \"<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>In this example, the regular expression matches the string <code>\"hello\"<\/code> followed by a number and optionally a whitespace character. The <code>g<\/code> flag is important as it allows the regular expression to use <code>lastIndex<\/code> when set (without it, matches always start at <code>0<\/code> regardless of the <code>lastIndex<\/code> value). The first call to <code>exec()<\/code> results in matching \u201chello1\u201d first while the second call, with a <code>lastIndex<\/code> of 7, matches \u201chello2\u201d first.<\/p>\n\n<p>The sticky flag tells the regular expression to save the index of the next character after the last match in <code>lastIndex<\/code> whenever an operation is performed (in the previous example, 7 is the location of next character after \u201chello1 \u201c). If an operation results in no match then <code>lastIndex<\/code> is set back to 0.<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">pattern<\/code> <code class=\"o\">=<\/code> <code class=\"err\">\/hello\\d\\s?\/y,<\/code>\n <code class=\"nx\">text<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\"hello1 hello2 hello3\"<\/code><code class=\"p\">,<\/code>\n <code class=\"nx\">result<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">exec<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">);<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">result<\/code><code class=\"p\">[<\/code><code class=\"mi\">0<\/code><code class=\"p\">]);<\/code> <code class=\"c1\">\/\/ \"hello1 \"<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">lastIndex<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ 7<\/code>\n\n<code class=\"nx\">result<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">exec<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">);<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">result<\/code><code class=\"p\">[<\/code><code class=\"mi\">0<\/code><code class=\"p\">]);<\/code> <code class=\"c1\">\/\/ \"hello2 \"<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">lastIndex<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ 14<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>Here, the same pattern is used but with the sticky flag instead of the global flag. The value of <code>lastIndex<\/code> changed to 7 after the first call to <code>exec()<\/code> and to 14 after the second call. Since the sticky flag is updating <code>lastIndex<\/code> for you, there\u2019s no need to keep track and manually update it yourself.<\/p>\n\n<p>Perhaps the most important thing to understand about the sticky flag is that sticky regular expressions have an implied <code>^<\/code> at the beginning, indicating that the pattern should match from the beginning of the input. For example, if the previous example is changed to not match the whitespace character, there are different results:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">pattern<\/code> <code class=\"o\">=<\/code> <code class=\"err\">\/hello\\d\/y,<\/code>\n <code class=\"nx\">text<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\"hello1 hello2 hello3\"<\/code><code class=\"p\">,<\/code>\n <code class=\"nx\">result<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">exec<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">);<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">result<\/code><code class=\"p\">[<\/code><code class=\"mi\">0<\/code><code class=\"p\">]);<\/code> <code class=\"c1\">\/\/ \"hello1\"<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">lastIndex<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ 6<\/code>\n\n<code class=\"nx\">result<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">exec<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">);<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">result<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ null<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">lastIndex<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ 0<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>Without matching the whitespace character, the <code>lastIndex<\/code> is set to 6 after the first call to <code>exec()<\/code>. That means the regular expression will be evaluating the string as if it were this:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"s2\">\" hello2 hello3\"<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>Since there is an implied <code>^<\/code> at the beginning of the regular expression pattern, the pattern starts by matching <code>\"h\"<\/code> against the space and sees that they are not equivalent. The matching stops there and <code>null<\/code> is returned. The <code>lastIndex<\/code> property is reset to 0.<\/p>\n\n<p>As with other regular expression flags, you can detect the presence of <code>y<\/code> by using a property. The <code>sticky<\/code> property is set to true with the sticky flag is present and false if not:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">pattern<\/code> <code class=\"o\">=<\/code> <code class=\"err\">\/hello\\d\/y;<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">sticky<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ true<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>The <code>sticky<\/code> property is read-only based on the presence of the flag and so cannot be changed in code.<\/p>\n\n<p>Similar to the <code>u<\/code> flag, the <code>y<\/code> flag is a syntax change, so it will cause a syntax error in older JavaScript engines. You can use the same approach to detect support:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">function<\/code> <code class=\"nx\">hasRegExpY<\/code><code class=\"p\">()<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">try<\/code> <code class=\"p\">{<\/code>\n <code class=\"kd\">var<\/code> <code class=\"nx\">pattern<\/code> <code class=\"o\">=<\/code> <code class=\"k\">new<\/code> <code class=\"nb\">RegExp<\/code><code class=\"p\">(<\/code><code class=\"s2\">\".\"<\/code><code class=\"p\">,<\/code> <code class=\"s2\">\"y\"<\/code><code class=\"p\">);<\/code>\n <code class=\"k\">return<\/code> <code class=\"kc\">true<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">catch<\/code> <code class=\"p\">(<\/code><code class=\"nx\">ex<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"kc\">false<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code>\n<code class=\"p\">}<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>Also similar to <code>u<\/code>, if you need to use <code>y<\/code> in code that runs in older JavaScript engines, be sure to use the <code>RegExp<\/code> constructor when defining those regular expressions to avoid a syntax error.<\/p>\n\n<h4>Duplicating Regular Expressions<\/h4>\n\n<p>In ECMAScript 5, you can duplicate regular expressions by passing them into the <code>RegExp<\/code> constructor, such as:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">re1<\/code> <code class=\"o\">=<\/code> <code class=\"sr\">\/ab\/i<\/code><code class=\"p\">,<\/code>\n <code class=\"nx\">re2<\/code> <code class=\"o\">=<\/code> <code class=\"k\">new<\/code> <code class=\"nb\">RegExp<\/code><code class=\"p\">(<\/code><code class=\"nx\">re1<\/code><code class=\"p\">);<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>However, if you provide the second argument to <code>RegExp<\/code>, which specifies the flags for the regular expression, then an error is thrown:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">re1<\/code> <code class=\"o\">=<\/code> <code class=\"sr\">\/ab\/i<\/code><code class=\"p\">,<\/code>\n\n <code class=\"c1\">\/\/ throws an error in ES5, okay in ES6<\/code>\n <code class=\"nx\">re2<\/code> <code class=\"o\">=<\/code> <code class=\"k\">new<\/code> <code class=\"nb\">RegExp<\/code><code class=\"p\">(<\/code><code class=\"nx\">re1<\/code><code class=\"p\">,<\/code> <code class=\"s2\">\"g\"<\/code><code class=\"p\">);<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>If you execute this code in an ECMAScript 5 environment, you\u2019ll get an error stating that the second argument cannot be used when the first argument is a regular expression. ECMAScript 6 changed this behavior such that the second argument is allowed and will override whichever flags are present on the first argument. For example:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">re1<\/code> <code class=\"o\">=<\/code> <code class=\"sr\">\/ab\/i<\/code><code class=\"p\">,<\/code>\n\n <code class=\"c1\">\/\/ throws an error in ES5, okay in ES6<\/code>\n <code class=\"nx\">re2<\/code> <code class=\"o\">=<\/code> <code class=\"k\">new<\/code> <code class=\"nb\">RegExp<\/code><code class=\"p\">(<\/code><code class=\"nx\">re1<\/code><code class=\"p\">,<\/code> <code class=\"s2\">\"g\"<\/code><code class=\"p\">);<\/code>\n\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">re1<\/code><code class=\"p\">.<\/code><code class=\"nx\">toString<\/code><code class=\"p\">());<\/code> <code class=\"c1\">\/\/ \"\/ab\/i\"<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">re2<\/code><code class=\"p\">.<\/code><code class=\"nx\">toString<\/code><code class=\"p\">());<\/code> <code class=\"c1\">\/\/ \"\/ab\/g\"<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">re1<\/code><code class=\"p\">.<\/code><code class=\"nx\">test<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"ab\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">re2<\/code><code class=\"p\">.<\/code><code class=\"nx\">test<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"ab\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">re1<\/code><code class=\"p\">.<\/code><code class=\"nx\">test<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"AB\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">re2<\/code><code class=\"p\">.<\/code><code class=\"nx\">test<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"AB\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ false<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>In this code, <code>re1<\/code> has the case-insensitive <code>i<\/code> flag present while <code>re2<\/code> has only the global <code>g<\/code> flag. The <code>RegExp<\/code> constructor duplicated the pattern from <code>re1<\/code> and then substituted <code>g<\/code> for <code>i<\/code>. If the second argument was missing then <code>re2<\/code> would have the same flags as <code>re1<\/code>.<\/p>\n\n<h4>The <code>flags<\/code> Property<\/h4>\n\n<p>In ECMAScript 5, it\u2019s possible to get the text of the regular expression by using the <code>source<\/code> property, but to get the flag string requires parsing the output of <code>toString()<\/code>, such as:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">function<\/code> <code class=\"nx\">getFlags<\/code><code class=\"p\">(<\/code><code class=\"nx\">re<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"kd\">var<\/code> <code class=\"nx\">text<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">re<\/code><code class=\"p\">.<\/code><code class=\"nx\">toString<\/code><code class=\"p\">();<\/code>\n <code class=\"k\">return<\/code> <code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">substring<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">lastIndexOf<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"\/\"<\/code><code class=\"p\">)<\/code> <code class=\"o\">+<\/code> <code class=\"mi\">1<\/code><code class=\"p\">,<\/code> <code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">length<\/code><code class=\"p\">);<\/code>\n<code class=\"p\">}<\/code>\n\n<code class=\"c1\">\/\/ toString() is \"\/ab\/g\"<\/code>\n<code class=\"kd\">var<\/code> <code class=\"nx\">re<\/code> <code class=\"o\">=<\/code> <code class=\"sr\">\/ab\/g<\/code><code class=\"p\">;<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">getFlags<\/code><code class=\"p\">(<\/code><code class=\"nx\">re<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ \"g\"<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>ECMAScript 6 adds a <code>flags<\/code> property to go along with <code>source<\/code>. Both properties are prototype accessor properties with only a getter assigned (making them read-only). The addition of <code>flags<\/code> makes it easier to inspect regular expressions for both debugging and inheritance purposes.<\/p>\n\n<p>A late addition to ECMAScript 6, the <code>flags<\/code> property returns the string representation of any flags applied to a regular expression. For example:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">re<\/code> <code class=\"o\">=<\/code> <code class=\"sr\">\/ab\/g<\/code><code class=\"p\">;<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">re<\/code><code class=\"p\">.<\/code><code class=\"nx\">source<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ \"ab\"<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">re<\/code><code class=\"p\">.<\/code><code class=\"nx\">flags<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ \"g\"<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>Using <code>source<\/code> and <code>flags<\/code> together allow you to extract just the pieces of the regular expression that are necessary without needing to parse the regular expression string directly.<\/p>\n\n<h3>Object.is()<\/h3>\n\n<p>When you want to compare two values, you\u2019re probably used to using either the equals operator (<code>==<\/code>) or the identically equals operator (<code>===<\/code>). Many prefer to use the latter to avoid type coercion during the comparison. However, even the identically equals operator isn\u2019t entirely accurate. For example, the values +0 and -0 are considered equal by <code>===<\/code> even though they are represented differently in the JavaScript engine. Also <code>NaN === NaN<\/code> returns <code>false<\/code>, which necessitates using <code>isNaN()<\/code> to detect <code>NaN<\/code> properly.<\/p>\n\n<p>ECMAScript 6 introduces <code>Object.is()<\/code> to make up for the remaining quirks of the identically equals operator. This method accepts two arguments and returns <code>true<\/code> if the values are equivalent. Two values are considered equivalent when they are of the same type and have the same value. In many cases, <code>Object.is()<\/code> works the same as <code>===<\/code>. The only differences are that +0 and -0 are considered not equivalent and <code>NaN<\/code> is considered equivalent to <code>NaN<\/code>. Here are some examples:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"o\">+<\/code><code class=\"mi\">0<\/code> <code class=\"o\">==<\/code> <code class=\"o\">-<\/code><code class=\"mi\">0<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"o\">+<\/code><code class=\"mi\">0<\/code> <code class=\"o\">===<\/code> <code class=\"o\">-<\/code><code class=\"mi\">0<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nb\">Object<\/code><code class=\"p\">.<\/code><code class=\"nx\">is<\/code><code class=\"p\">(<\/code><code class=\"o\">+<\/code><code class=\"mi\">0<\/code><code class=\"p\">,<\/code> <code class=\"o\">-<\/code><code class=\"mi\">0<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ false<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"kc\">NaN<\/code> <code class=\"o\">==<\/code> <code class=\"kc\">NaN<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ false<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"kc\">NaN<\/code> <code class=\"o\">===<\/code> <code class=\"kc\">NaN<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ false<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nb\">Object<\/code><code class=\"p\">.<\/code><code class=\"nx\">is<\/code><code class=\"p\">(<\/code><code class=\"kc\">NaN<\/code><code class=\"p\">,<\/code> <code class=\"kc\">NaN<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"mi\">5<\/code> <code class=\"o\">==<\/code> <code class=\"mi\">5<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"mi\">5<\/code> <code class=\"o\">==<\/code> <code class=\"s2\">\"5\"<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"mi\">5<\/code> <code class=\"o\">===<\/code> <code class=\"mi\">5<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"mi\">5<\/code> <code class=\"o\">===<\/code> <code class=\"s2\">\"5\"<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ false<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nb\">Object<\/code><code class=\"p\">.<\/code><code class=\"nx\">is<\/code><code class=\"p\">(<\/code><code class=\"mi\">5<\/code><code class=\"p\">,<\/code> <code class=\"mi\">5<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nb\">Object<\/code><code class=\"p\">.<\/code><code class=\"nx\">is<\/code><code class=\"p\">(<\/code><code class=\"mi\">5<\/code><code class=\"p\">,<\/code> <code class=\"s2\">\"5\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ false<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>In most cases you will probably still want to use <code>==<\/code> or <code>===<\/code> for comparing values, as special cases covered by <code>Object.is()<\/code> may not affect you directly.<\/p>\n\n<h3>Block bindings<\/h3>\n\n<p>Traditionally, one of the tricky parts of JavaScript has been the way that <code>var<\/code> declarations work. In most C-based languages, variables are created at the spot where the declaration occurs. In JavaScript, however, this is not the case. Variables declared using <code>var<\/code> are <em>hoisted<\/em> to the top of the function (or global scope) regardless of where the actual declaration occurs. For example:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">function<\/code> <code class=\"nx\">getValue<\/code><code class=\"p\">(<\/code><code class=\"nx\">condition<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n\n <code class=\"k\">if<\/code> <code class=\"p\">(<\/code><code class=\"nx\">condition<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"kd\">var<\/code> <code class=\"nx\">value<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\"blue\"<\/code><code class=\"p\">;<\/code>\n\n <code class=\"c1\">\/\/ other code<\/code>\n\n <code class=\"k\">return<\/code> <code class=\"nx\">value<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">else<\/code> <code class=\"p\">{<\/code>\n\n <code class=\"c1\">\/\/ value exists here with a value of undefined<\/code>\n\n <code class=\"k\">return<\/code> <code class=\"kc\">null<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code>\n\n <code class=\"c1\">\/\/ value exists here with a value of undefined<\/code>\n<code class=\"p\">}<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>If you are unfamiliar with JavaScript, you might expect that the variable <code>value<\/code> is only defined if <code>condition<\/code> evaluates to true. In fact, the variable <code>value<\/code> is declared regardless. The JavaScript engine changes the function to look like this:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">function<\/code> <code class=\"nx\">getValue<\/code><code class=\"p\">(<\/code><code class=\"nx\">condition<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n\n <code class=\"kd\">var<\/code> <code class=\"nx\">value<\/code><code class=\"p\">;<\/code>\n\n <code class=\"k\">if<\/code> <code class=\"p\">(<\/code><code class=\"nx\">condition<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"nx\">value<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\"blue\"<\/code><code class=\"p\">;<\/code>\n\n <code class=\"c1\">\/\/ other code<\/code>\n\n <code class=\"k\">return<\/code> <code class=\"nx\">value<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">else<\/code> <code class=\"p\">{<\/code>\n\n <code class=\"k\">return<\/code> <code class=\"kc\">null<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code>\n<code class=\"p\">}<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>The declaration of <code>value<\/code> is moved to the top (hoisted) while the initialization remains in the same spot. That means the variable <code>value<\/code> is actually still accessible from within the <code>else<\/code> clause, it just has a value of <code>undefined<\/code> because it hasn\u2019t been initialized.<\/p>\n\n<p>It often takes new JavaScript developers some time to get used to declaration hoisting and this unique behavior can end up causing",
"5": "\n<h2>Introduction<\/h2>\n\n<p>The JavaScript core language features are defined in a standard called ECMA-262. The language defined in this standard is called ECMAScript, of which the JavaScript in the browser and Node.js environments are a superset. While browsers and Node.js may add more capabilities through additional objects and methods, the core of the language remains as defined in ECMAScript, which is why the ongoing development of ECMA-262 is vital to the success of JavaScript as a whole.<\/p>\n\n<p>In 2007, JavaScript was at a crossroads. The popularity of Ajax was ushering in a new age of dynamic web applications while JavaScript hadn\u2019t changed since the third edition of ECMA-262 was published in 1999. TC-39, the committee responsible for driving the ECMAScript process, put together a large draft specification for ECMAScript 4. ECMAScript 4 was massive in scope, introducing changes both small and large to the language. Language features included new syntax, modules, classes, classical inheritance, private object members, optional type annotations, and more.<\/p>\n\n<p>The scope of the ECMAScript 4 changes caused a rift to form in TC-39, with some members feeling that the fourth edition was trying to accomplish too much. A group of leaders from Yahoo, Google, and Microsoft came up with an alternate proposal for the next version of ECMAScript that they initially called ECMAScript 3.1. The \u201c3.1\u201d was intended to show that this was an incremental change to the existing standard.<\/p>\n\n<p>ECMAScript 3.1 introduced very few syntax changes, instead focusing on property attributes, native JSON support, and adding methods to already-existing objects. Although there was an early attempt to reconcile ECMAScript 3.1 and ECMAScript 4, this ultimately failed as the two camps had difficulty with the very different perspectives on how the language should grow.<\/p>\n\n<p>In 2008, Brendan Eich, the creator of JavaScript, announced that TC-39 would focus its efforts on standardizing ECMAScript 3.1. They would table the major syntax and feature changes of ECMAScript 4 until after the next version of ECMAScript was standardized, and all members of the committee would work to bring the best pieces of ECMAScript 3.1 and 4 together after that point into an effort initially nicknamed ECMAScript Harmony.<\/p>\n\n<p>ECMAScript 3.1 was eventually standardized as the fifth edition of ECMA-262, also described as ECMAScript 5. The committee never released an ECMAScript 4 standard to avoid confusion with the now-defunct effort of the same name. Work then began on ECMAScript Harmony, with ECMAScript 6 being the first standard released in this new \u201charmonious\u201d spirit.<\/p>\n\n<p>ECMAScript 6 reached feature complete status in 2014. The features vary widely from completely new objects and patterns to syntax changes to new methods on existing objects. The exciting thing about ECMAScript 6 is that all of these changes are geared towards problems that developers are actually facing. And while it will still take time for adoption and implementation to reach the point where ECMAScript 6 is the minimum that developers can expect, there\u2019s a lot to be gained from a good understanding of what the future of JavaScript looks like.<\/p>\n\n<h3>Browser and Node.js Compatibility<\/h3>\n\n<p>Many JavaScript environments, such as web browsers and Node.js, are actively working on implementing ECMAScript 6. This book does not attempt to address to inconsistencies between implementations and instead focuses on what the specification defines as the correct behavior. As such, it\u2019s possible that your JavaScript environment may not conform to the behavior described in this book.<\/p>\n\n<h3>Who This Book is For<\/h3>\n\n<p>This book is intended as a guide for those who are already familiar with JavaScript and ECMAScript 5. While a deep understanding of the language isn\u2019t necessary to use this book, it is helpful in understanding the differences between ECMAScript 5 and 6. In particular, this book is aimed at intermediate-to-advanced JavaScript developers (both browser and Node.js environments) who want to learn about the future of the language.<\/p>\n\n<p>This book is not for beginners who have never written JavaScript. You will need to have a good basic understanding of the language to make use of this book.<\/p>\n\n<h3>Overview<\/h3>\n\n<p><strong>Chapter 1: The Basics<\/strong> introduces the smallest changes in the language. These are the new features that don\u2019t necessarily introduce syntax changes, but rather are incremental changes on top of ECMAScript 5.<\/p>\n\n<p><strong>Chapter 2: Functions<\/strong> discusses the various changes to functions. This includes the arrow function form, default parameters, rest parameters, and more.<\/p>\n\n<p><strong>Chapter 3: Objects<\/strong> explains the changes to how objects are created, modified, and used. Topics include changes to object literal syntax, and new reflection methods.<\/p>\n\n<p><strong>Chapter 4: Symbols<\/strong> introduces the concept of symbols, a new way to define properties. Symbols are a new primitive type that can be used to obscure (but not hide) object properties and methods.<\/p>\n\n<p><strong>Chapter 5: Arrays<\/strong> details the changes to native arrays and the interesting new ways they can be used in JavaScript.<\/p>\n\n<p><strong>Chapter 6: Collections<\/strong> details the new collection types of <code>Set<\/code>, <code>WeakSet<\/code>, <code>Map<\/code>, and <code>WeakMap<\/code>. These types expand on the usefulness of arrays by adding semantics, de-duping, and memory management designed specifically for JavaScript.<\/p>\n\n<p><strong>Chapter 7: Classes<\/strong> introduces the first formal concept of classes in JavaScript. Often a point of confusion for those coming from other languages, the addition of class syntax in JavaScript makes the language more approachable to others and more concise for enthusiasts.<\/p>\n\n<p><strong>Chapter 8: Iterators and Generators<\/strong> discusses the addition of iterators and generators to the language. These features allow you to work with collections of data in powerful ways that were not possible in previous versions of JavaScript.<\/p>\n\n<p><strong>Chapter 9: Proxies<\/strong> discusses the new proxy object that allows you to intercept every operation performed on an object. Proxies give developers unprecedented control over objects and, as such, unlimited possibilities for defining new interaction patterns.<\/p>\n\n<p><strong>Chapter 10: Promises<\/strong> introduces promises as a new part of the language. Promises were a grassroots effort that eventually took off and gained in popularity due to extensive library support. ECMAScript 6 formalizes promises and makes them available by default.<\/p>\n\n<p><strong>Chapter 11: Modules<\/strong> details the official module format for JavaScript. The intent is that these modules can replace the numerous ad-hoc module definition formats that have appeared over the years.<\/p>\n\n<p><strong>Chapter 12: Template Strings<\/strong> discusses the new built-in templating functionality. Template strings are designed to easily create DSLs in a secure way.<\/p>\n\n<p><strong>Chapter 13: Reflection<\/strong> introduces the formalized reflection API for JavaScript. Similar to other languages, ECMAScript 6 reflection allows you to inspect objects at a granular level, even if you didn\u2019t create the object.<\/p>\n\n<h3>Help and Support<\/h3>\n\n<p>You can file issues, suggest changes, and open pull requests against this book by visiting: <a href=\"https:\/\/github.com\/nzakas\/understandinges6\">https:\/\/github.com\/nzakas\/understandinges6<\/a><\/p>\n\n<p>For anything else, please send a message to the mailing list: <a href=\"http:\/\/groups.google.com\/group\/zakasbooks\">http:\/\/groups.google.com\/group\/zakasbooks<\/a>.<\/p>\n\n<h2>The Basics<\/h2>\n\n<p>ECMAScript 6 makes a large number of changes on top of ECMAScript 5. Some of the changes are larger, such as adding new types or syntax, while others are quite small, providing incremental improvements on top of the language. This chapter covers those incremental improvements that likely won\u2019t gain a lot of attention but provide some important functionality that may make certain types of problems easier to solve.<\/p>\n\n<h3>Better Unicode Support<\/h3>\n\n<p>Prior to ECMAScript 6, JavaScript strings were based solely on the idea of 16-bit character encodings. All string properties and methods, such as <code>length<\/code> and <code>charAt()<\/code>, were based around the idea that every 16-bit sequence represented a single character. ECMAScript 5 allowed JavaScript engines to decide which of two encodings to use, either UCS-2 or UTF-16 (both encodings use 16-bit <em>code units<\/em>, making all observable operations the same). While it\u2019s true that all of the world\u2019s characters used to fit into 16 bits at one point in time, that is no longer the case.<\/p>\n\n<p>Keeping within 16 bits wasn\u2019t possible for Unicode\u2019s stated goal of providing a globally unique identifier to every character in the world. These globally unique identifiers, called <em>code points<\/em>, are simply numbers starting at 0 (you might think of these as character codes, but there is subtle difference). A character encoding is responsible for encoding a code point into code units that are internally consistent. While UCS-2 had a one-to-one mapping of code point to code unit, UTF-16 is more variable.<\/p>\n\n<p>The first 2^16 code points are represented as single 16-bit code units in UTF-16. This is called the <em>Basic Multilingual Plane<\/em> (BMP). Everything beyond that range is considered to be in a <em>supplementary plane<\/em>, where the code points can no longer be represented in just 16-bits. UTF-16 solves this problem by introducing <em>surrogate pairs<\/em> in which a single code point is represented by two 16-bit code units. That means any single character in a string can be either one code unit (for BMP, total of 16 bits) or two (for supplementary plane characters, total of 32 bits).<\/p>\n\n<p>ECMAScript 5 kept all operations as working on 16-bit code units, meaning that you could get unexpected results from strings containing surrogate pairs. For example:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">text<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\"\ud842\udfb7\"<\/code><code class=\"p\">;<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">length<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ 2<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"sr\">\/^.$\/<\/code><code class=\"p\">.<\/code><code class=\"nx\">test<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ false<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">charAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">0<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ \"\"<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">charAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">1<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ \"\"<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">charCodeAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">0<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 55362<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">charCodeAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">1<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 57271<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>In this example, a single Unicode character is represented using surrogate pairs, and as such, the JavaScript string operations treat the string as having two 16-bit characters. That means <code>length<\/code> is 2, a regular expression trying to match a single character fails, and <code>charAt()<\/code> is unable to return a valid character string. The <code>charCodeAt()<\/code> method returns the appropriate 16-bit number for each code unit, but that is the closest you could get to the real value in ECMAScript 5.<\/p>\n\n<p>ECMAScript 6 enforces encoding of strings in UTF-16. Standardizing on this character encoding means that the language can now support functionality designed to work specifically with surrogate pairs.<\/p>\n\n<h4>The codePointAt() Method<\/h4>\n\n<p>The first example of fully supporting UTF-16 is the <code>codePointAt()<\/code> method, which can be used to retrieve the Unicode code point that maps to a given position in a string. This method accepts the code unit position (not the character position) and returns an integer value:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">text<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\"\ud842\udfb7a\"<\/code><code class=\"p\">;<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">charCodeAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">0<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 55362<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">charCodeAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">1<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 57271<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">charCodeAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">2<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 97<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">codePointAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">0<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 134071<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">codePointAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">1<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 57271<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">codePointAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">2<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 97<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>The <code>codePointAt()<\/code> method works in the same manner as <code>charCodeAt()<\/code> except for non-BMP characters. The first character in <code>text<\/code> is non-BMP and is therefore comprised of two code units, meaning the entire length of the string is 3 rather than 2. The <code>charAt()<\/code> method returns only the first code unit for position 0 whereas <code>codePointAt()<\/code> returns the full code point even though it spans multiple code units. Both methods return the same value for positions 1 (the second code unit of the first character) and 2 (the <code>\"a\"<\/code>).<\/p>\n\n<p>This method is the easiest way to determine if a given character is represented by one or two code points:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">function<\/code> <code class=\"nx\">is32Bit<\/code><code class=\"p\">(<\/code><code class=\"nx\">c<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"nx\">c<\/code><code class=\"p\">.<\/code><code class=\"nx\">codePointAt<\/code><code class=\"p\">(<\/code><code class=\"mi\">0<\/code><code class=\"p\">)<\/code> <code class=\"o\">><\/code> <code class=\"mh\">0xFFFF<\/code><code class=\"p\">;<\/code>\n<code class=\"p\">}<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">is32Bit<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"\ud842\udfb7\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">is32Bit<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"a\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ false<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>The upper bound of 16-bit characters is represented in hexadecimal as <code>FFFF<\/code>, so any code point above that number must be represented by two code units.<\/p>\n\n<h4>String.fromCodePoint()<\/h4>\n\n<p>When ECMAScript provides a way to do something, it also tends to provide a way to do the reverse. You can use <code>codePointAt()<\/code> to retrieve the code point for a character in a string while <code>String.fromCodePoint()<\/code> produces a single-character string for the given code point. For example:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nb\">String<\/code><code class=\"p\">.<\/code><code class=\"nx\">fromCodePoint<\/code><code class=\"p\">(<\/code><code class=\"mi\">134071<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ \"\ud842\udfb7\"<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>You can think of <code>String.fromCodePoint()<\/code> as a more complete version of <code>String.fromCharCode()<\/code>. Each method has the same result for all characters in the BMP; the only difference is with characters outside of that range.<\/p>\n\n<h4>Escaping Non-BMP Characters<\/h4>\n\n<p>ECMAScript 5 allows strings to contain 16-bit Unicode characters represented by an <em>escape sequence<\/em>. The escape sequence is the <code>\\u<\/code> followed by four hexadecimal values. For example, the escape sequence <code>\\u0061<\/code> represents the letter <code>\"a\"<\/code>:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"\\u0061\"<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ \"a\"<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>If you try to use an escape sequence with a number past <code>FFFF<\/code>, the upper bound of the BMP, then you can get some surprising results:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"\\u20BB7\"<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ \"7\"<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>Since Unicode escape sequences were defined as always having exactly four hexadecimal characters, ECMAScript evaluates <code>\\u20BB7<\/code> as two characters: <code>\\u20BB<\/code> and <code>\"7\"<\/code>. The first character is unprintable and the second is the number 7.<\/p>\n\n<p>ECMAScript 6 solves this problem by introducing an extended Unicode escape sequence where the hexadecimal numbers are contained within curly braces. This allows any number of hexadecimal characters to specify a single character:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"\\u{20BB7}\"<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ \"\ud842\udfb7\"<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>Using the extended escape sequence, the correct character is contained in the string.<\/p>\n\n<h4>The normalize() Method<\/h4>\n\n<p>Another interesting aspect of Unicode is that different characters may be considered equivalent for the purposes of sorting or other comparison-based operations. There are two ways to define these relationships. First, <em>canonical equivalence<\/em> means that two sequences of code points are considered interchangeable in all respects. That even means that a combination of two characters can be canonically equivalent to one character. The second relationship is <em>compatibility<\/em>, meaning that two sequences of code points having different appearances but can be used interchangeably in certain situations.<\/p>\n\n<p>The important thing to understand is that due to these relationships, it\u2019s possible to have two strings that represent fundamentally the same text and yet have them contain different code point sequences. For example, the character \u201c\u00e6\u201d and the string \u201cae\u201d may be used interchangeably even though they are different code points. These two strings would therefore be unequal in JavaScript unless they are normalized in some way.<\/p>\n\n<p>ECMAScript 6 supports the four Unicode normalization forms through a new <code>normalize()<\/code> method on strings. This method optionally accepts a single parameter, one of <code>\"NFC\"<\/code> (default), <code>\"NFD\"<\/code>, <code>\"NFKC\"<\/code>, or <code>\"NFKD\"<\/code>. It\u2019s beyond the scope of this book to explain the differences between these four forms. Just keep in mind that, in order to be used, you must normalize both strings that are being compared to the same form. For example:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">normalized<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">values<\/code><code class=\"p\">.<\/code><code class=\"nx\">map<\/code><code class=\"p\">(<\/code><code class=\"kd\">function<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">normalize<\/code><code class=\"p\">();<\/code>\n<code class=\"p\">});<\/code>\n\n<code class=\"nx\">normalized<\/code><code class=\"p\">.<\/code><code class=\"nx\">sort<\/code><code class=\"p\">(<\/code><code class=\"kd\">function<\/code><code class=\"p\">(<\/code><code class=\"nx\">first<\/code><code class=\"p\">,<\/code> <code class=\"nx\">second<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">if<\/code> <code class=\"p\">(<\/code><code class=\"nx\">first<\/code> <code class=\"o\"><<\/code> <code class=\"nx\">second<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"o\">-<\/code><code class=\"mi\">1<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">else<\/code> <code class=\"k\">if<\/code> <code class=\"p\">(<\/code><code class=\"nx\">first<\/code> <code class=\"o\">===<\/code> <code class=\"nx\">second<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"mi\">0<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">else<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"mi\">1<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code>\n<code class=\"p\">});<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>In this code, the strings in a <code>values<\/code> array are converted into a normalized form so that the array can be sorted appropriately. You can accomplish the sort on the original array by calling <code>normalize()<\/code> as part of the comparator:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"nx\">values<\/code><code class=\"p\">.<\/code><code class=\"nx\">sort<\/code><code class=\"p\">(<\/code><code class=\"kd\">function<\/code><code class=\"p\">(<\/code><code class=\"nx\">first<\/code><code class=\"p\">,<\/code> <code class=\"nx\">second<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"kd\">var<\/code> <code class=\"nx\">firstNormalized<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">first<\/code><code class=\"p\">.<\/code><code class=\"nx\">normalize<\/code><code class=\"p\">(),<\/code>\n <code class=\"nx\">secondNormalized<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">second<\/code><code class=\"p\">.<\/code><code class=\"nx\">normalize<\/code><code class=\"p\">();<\/code>\n\n <code class=\"k\">if<\/code> <code class=\"p\">(<\/code><code class=\"nx\">firstNormalized<\/code> <code class=\"o\"><<\/code> <code class=\"nx\">secondNormalized<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"o\">-<\/code><code class=\"mi\">1<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">else<\/code> <code class=\"k\">if<\/code> <code class=\"p\">(<\/code><code class=\"nx\">firstNormalized<\/code> <code class=\"o\">===<\/code> <code class=\"nx\">secondNormalized<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"mi\">0<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">else<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"mi\">1<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code>\n<code class=\"p\">});<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>Once again, the most important thing to remember is that both values must be normalized in the same way. These examples have used the default, NFC, but you can just as easily specify one of the others:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"nx\">values<\/code><code class=\"p\">.<\/code><code class=\"nx\">sort<\/code><code class=\"p\">(<\/code><code class=\"kd\">function<\/code><code class=\"p\">(<\/code><code class=\"nx\">first<\/code><code class=\"p\">,<\/code> <code class=\"nx\">second<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"kd\">var<\/code> <code class=\"nx\">firstNormalized<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">first<\/code><code class=\"p\">.<\/code><code class=\"nx\">normalize<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"NFD\"<\/code><code class=\"p\">),<\/code>\n <code class=\"nx\">secondNormalized<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">second<\/code><code class=\"p\">.<\/code><code class=\"nx\">normalize<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"NFD\"<\/code><code class=\"p\">);<\/code>\n\n <code class=\"k\">if<\/code> <code class=\"p\">(<\/code><code class=\"nx\">firstNormalized<\/code> <code class=\"o\"><<\/code> <code class=\"nx\">secondNormalized<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"o\">-<\/code><code class=\"mi\">1<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">else<\/code> <code class=\"k\">if<\/code> <code class=\"p\">(<\/code><code class=\"nx\">firstNormalized<\/code> <code class=\"o\">===<\/code> <code class=\"nx\">secondNormalized<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"mi\">0<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">else<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"mi\">1<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code>\n<code class=\"p\">});<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>If you\u2019ve never worried about Unicode normalization before, then you probably won\u2019t have much use for this method. However, knowing that it is available will help should you ever end up working on an internationalized application.<\/p>\n\n<h4>The Regular Expression u Flag<\/h4>\n\n<p>Many common string operations are accomplished by using regular expressions. However, as noted earlier, regular expressions also work on the basis of 16-bit code units each representing a single character. That\u2019s why the single character match in the earlier example didn\u2019t work. To address this problem, ECMAScript 6 defines a new flag for regular expressions: <code>u<\/code> for \u201cUnicode\u201d.<\/p>\n\n<p>When a regular expression has the <code>u<\/code> flag set, it switches modes to work on characters and not code units. That means the regular expression will no longer get confused about surrogate pairs in strings and can behave as expected. For example:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">text<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\"\ud842\udfb7\"<\/code><code class=\"p\">;<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">length<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ 2<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"sr\">\/^.$\/<\/code><code class=\"p\">.<\/code><code class=\"nx\">test<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ false<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"err\">\/^.$\/u.test(text)); \/\/ true<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>Adding the <code>u<\/code> flag allows the regular expression to correctly match the string by characters. Unfortunately, ECMAScript 6 does not have a way of determining how many code points are present in a string; fortunately, regular expressions can be used to figure it out:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">function<\/code> <code class=\"nx\">codePointLength<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"kd\">var<\/code> <code class=\"nx\">result<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">match<\/code><code class=\"p\">(<\/code><code class=\"err\">\/[\\s\\S]\/gu);<\/code>\n <code class=\"k\">return<\/code> <code class=\"nx\">result<\/code> <code class=\"o\">?<\/code> <code class=\"nx\">result<\/code><code class=\"p\">.<\/code><code class=\"nx\">length<\/code> <code class=\"o\">:<\/code> <code class=\"mi\">0<\/code><code class=\"p\">;<\/code>\n<code class=\"p\">}<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">codePointLength<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"abc\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 3<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">codePointLength<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"\ud842\udfb7bc\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ 3<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>The regular expression in this example matches both whitespace and non-whitespace characters, and is applied globally with Unicode enabled. The <code>result<\/code> contains an array of matches when there\u2019s at least one match, so the array length ends up being the number of code points in the string.<\/p>\n\n<p>Since the <code>u<\/code> flag is a syntax change, attempting to use it in non-compliant JavaScript engines means a syntax error is thrown. The safest way to determine if the <code>u<\/code> flag is supported is with a function:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">function<\/code> <code class=\"nx\">hasRegExpU<\/code><code class=\"p\">()<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">try<\/code> <code class=\"p\">{<\/code>\n <code class=\"kd\">var<\/code> <code class=\"nx\">pattern<\/code> <code class=\"o\">=<\/code> <code class=\"k\">new<\/code> <code class=\"nb\">RegExp<\/code><code class=\"p\">(<\/code><code class=\"s2\">\".\"<\/code><code class=\"p\">,<\/code> <code class=\"s2\">\"u\"<\/code><code class=\"p\">);<\/code>\n <code class=\"k\">return<\/code> <code class=\"kc\">true<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">catch<\/code> <code class=\"p\">(<\/code><code class=\"nx\">ex<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"kc\">false<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code>\n<code class=\"p\">}<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>This function uses the <code>RegExp<\/code> constructor to pass in the <code>u<\/code> flag as an argument. This is valid syntax even in older JavaScript engines, however, the constructor will throw an error if <code>u<\/code> isn\u2019t supported.<\/p>\n\n<h3>Other String Changes<\/h3>\n\n<p>JavaScript strings have always lagged behind similar features of other languages. It was only in ECMAScript 5 that strings finally gained a <code>trim()<\/code> method, and ECMAScript 6 continues extending strings with new functionality.<\/p>\n\n<h4>includes(), startsWith(), endsWith()<\/h4>\n\n<p>Developers have used <code>indexOf()<\/code> as a way to identify strings inside of other strings since JavaScript was first introduced. ECMAScript 6 adds three new methods whose purpose is to identify strings inside of other strings:<\/p>\n\n<ul><li>\n<code>includes()<\/code> - returns true if the given text is found anywhere within the string or false if not.<\/li>\n <li>\n<code>startsWith()<\/code> - returns true if the given text is found at the beginning of the string or false if not.<\/li>\n <li>\n<code>endsWith()<\/code> - returns true if the given text is found at the end of the string or false if not.<\/li>\n<\/ul><p>Each of these methods accepts two arguments: the text to search for and an optional location from which to start the search. When the second argument is omitted, <code>includes()<\/code> and <code>startsWith()<\/code> start search from the beginning of the string while <code>endsWith()<\/code> starts from the end. In effect, the second argument results in less of the string being searched. Here are some examples:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">msg<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\"Hello world!\"<\/code><code class=\"p\">;<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">msg<\/code><code class=\"p\">.<\/code><code class=\"nx\">startsWith<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"Hello\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">msg<\/code><code class=\"p\">.<\/code><code class=\"nx\">endsWith<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"!\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">msg<\/code><code class=\"p\">.<\/code><code class=\"nx\">includes<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"o\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">msg<\/code><code class=\"p\">.<\/code><code class=\"nx\">startsWith<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"o\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ false<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">msg<\/code><code class=\"p\">.<\/code><code class=\"nx\">endsWith<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"world!\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">msg<\/code><code class=\"p\">.<\/code><code class=\"nx\">includes<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"x\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ false<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">msg<\/code><code class=\"p\">.<\/code><code class=\"nx\">startsWith<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"o\"<\/code><code class=\"p\">,<\/code> <code class=\"mi\">4<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">msg<\/code><code class=\"p\">.<\/code><code class=\"nx\">endsWith<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"o\"<\/code><code class=\"p\">,<\/code> <code class=\"mi\">8<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">msg<\/code><code class=\"p\">.<\/code><code class=\"nx\">includes<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"o\"<\/code><code class=\"p\">,<\/code> <code class=\"mi\">8<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ false<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>These three methods make it much easier to identify substrings without needing to worry about identifying their exact position.<\/p>\n\n<h4>repeat()<\/h4>\n\n<p>ECMAScript 6 also adds a <code>repeat()<\/code> method to strings. This method accepts a single argument, which is the number of times to repeat the string, and returns a new string that has the original string repeated the specified number of times. For example:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"x\"<\/code><code class=\"p\">.<\/code><code class=\"nx\">repeat<\/code><code class=\"p\">(<\/code><code class=\"mi\">3<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ \"xxx\"<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"hello\"<\/code><code class=\"p\">.<\/code><code class=\"nx\">repeat<\/code><code class=\"p\">(<\/code><code class=\"mi\">2<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ \"hellohello\"<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"abc\"<\/code><code class=\"p\">.<\/code><code class=\"nx\">repeat<\/code><code class=\"p\">(<\/code><code class=\"mi\">4<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ \"abcabcabcabc\"<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>This method is really a convenience function above all else, which can be especially useful when dealing with text manipulation. One example where this functionality comes in useful is with code formatting utilities where you need to create indentation levels:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"c1\">\/\/ indent using a specified number of spaces<\/code>\n<code class=\"kd\">var<\/code> <code class=\"nx\">indent<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\" \"<\/code><code class=\"p\">.<\/code><code class=\"nx\">repeat<\/code><code class=\"p\">(<\/code><code class=\"nx\">size<\/code><code class=\"p\">),<\/code>\n <code class=\"nx\">indentLevel<\/code> <code class=\"o\">=<\/code> <code class=\"mi\">0<\/code><code class=\"p\">;<\/code>\n\n<code class=\"c1\">\/\/ whenever you increase the indent<\/code>\n<code class=\"kd\">var<\/code> <code class=\"nx\">newIndent<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">indent<\/code><code class=\"p\">.<\/code><code class=\"nx\">repeat<\/code><code class=\"p\">(<\/code><code class=\"o\">++<\/code><code class=\"nx\">indentLevel<\/code><code class=\"p\">);<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<h3>Other Regular Expression Changes<\/h3>\n\n<p>Regular expressions are an important part of working with strings in JavaScript, and like many parts of the language, haven\u2019t really changed very much in recent versions. ECMAScript 6, however, made several improvements to regular expressions to go along with the updates to strings.<\/p>\n\n<h4>The Regular Expression y Flag<\/h4>\n\n<p>ECMAScript 6 standardized the <code>y<\/code> flag after it had been implemented in Firefox as a proprietary extension to regular expressions. The <code>y<\/code> (sticky) flag indicates that the next match should be made starting with the value of <code>lastIndex<\/code> on the regular expression.<\/p>\n\n<p>The <code>lastIndex<\/code> property indicates the position at which to start the match of a string and is set to <code>0<\/code> by default, meaning matches always start at the beginning of a string. You can, however, overwrite <code>lastIndex<\/code> to have it start from somewhere else:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">pattern<\/code> <code class=\"o\">=<\/code> <code class=\"sr\">\/hello\\d\\s?\/g<\/code><code class=\"p\">,<\/code>\n <code class=\"nx\">text<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\"hello1 hello2 hello3\"<\/code><code class=\"p\">,<\/code>\n <code class=\"nx\">result<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">exec<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">);<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">result<\/code><code class=\"p\">[<\/code><code class=\"mi\">0<\/code><code class=\"p\">]);<\/code> <code class=\"c1\">\/\/ \"hello1 \"<\/code>\n\n<code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">lastIndex<\/code> <code class=\"o\">=<\/code> <code class=\"mi\">7<\/code><code class=\"p\">;<\/code>\n<code class=\"nx\">result<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">exec<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">);<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">result<\/code><code class=\"p\">[<\/code><code class=\"mi\">0<\/code><code class=\"p\">]);<\/code> <code class=\"c1\">\/\/ \"hello2 \"<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>In this example, the regular expression matches the string <code>\"hello\"<\/code> followed by a number and optionally a whitespace character. The <code>g<\/code> flag is important as it allows the regular expression to use <code>lastIndex<\/code> when set (without it, matches always start at <code>0<\/code> regardless of the <code>lastIndex<\/code> value). The first call to <code>exec()<\/code> results in matching \u201chello1\u201d first while the second call, with a <code>lastIndex<\/code> of 7, matches \u201chello2\u201d first.<\/p>\n\n<p>The sticky flag tells the regular expression to save the index of the next character after the last match in <code>lastIndex<\/code> whenever an operation is performed (in the previous example, 7 is the location of next character after \u201chello1 \u201c). If an operation results in no match then <code>lastIndex<\/code> is set back to 0.<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">pattern<\/code> <code class=\"o\">=<\/code> <code class=\"err\">\/hello\\d\\s?\/y,<\/code>\n <code class=\"nx\">text<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\"hello1 hello2 hello3\"<\/code><code class=\"p\">,<\/code>\n <code class=\"nx\">result<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">exec<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">);<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">result<\/code><code class=\"p\">[<\/code><code class=\"mi\">0<\/code><code class=\"p\">]);<\/code> <code class=\"c1\">\/\/ \"hello1 \"<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">lastIndex<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ 7<\/code>\n\n<code class=\"nx\">result<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">exec<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">);<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">result<\/code><code class=\"p\">[<\/code><code class=\"mi\">0<\/code><code class=\"p\">]);<\/code> <code class=\"c1\">\/\/ \"hello2 \"<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">lastIndex<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ 14<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>Here, the same pattern is used but with the sticky flag instead of the global flag. The value of <code>lastIndex<\/code> changed to 7 after the first call to <code>exec()<\/code> and to 14 after the second call. Since the sticky flag is updating <code>lastIndex<\/code> for you, there\u2019s no need to keep track and manually update it yourself.<\/p>\n\n<p>Perhaps the most important thing to understand about the sticky flag is that sticky regular expressions have an implied <code>^<\/code> at the beginning, indicating that the pattern should match from the beginning of the input. For example, if the previous example is changed to not match the whitespace character, there are different results:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">pattern<\/code> <code class=\"o\">=<\/code> <code class=\"err\">\/hello\\d\/y,<\/code>\n <code class=\"nx\">text<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\"hello1 hello2 hello3\"<\/code><code class=\"p\">,<\/code>\n <code class=\"nx\">result<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">exec<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">);<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">result<\/code><code class=\"p\">[<\/code><code class=\"mi\">0<\/code><code class=\"p\">]);<\/code> <code class=\"c1\">\/\/ \"hello1\"<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">lastIndex<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ 6<\/code>\n\n<code class=\"nx\">result<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">exec<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">);<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">result<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ null<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">lastIndex<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ 0<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>Without matching the whitespace character, the <code>lastIndex<\/code> is set to 6 after the first call to <code>exec()<\/code>. That means the regular expression will be evaluating the string as if it were this:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"s2\">\" hello2 hello3\"<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>Since there is an implied <code>^<\/code> at the beginning of the regular expression pattern, the pattern starts by matching <code>\"h\"<\/code> against the space and sees that they are not equivalent. The matching stops there and <code>null<\/code> is returned. The <code>lastIndex<\/code> property is reset to 0.<\/p>\n\n<p>As with other regular expression flags, you can detect the presence of <code>y<\/code> by using a property. The <code>sticky<\/code> property is set to true with the sticky flag is present and false if not:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">pattern<\/code> <code class=\"o\">=<\/code> <code class=\"err\">\/hello\\d\/y;<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">pattern<\/code><code class=\"p\">.<\/code><code class=\"nx\">sticky<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ true<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>The <code>sticky<\/code> property is read-only based on the presence of the flag and so cannot be changed in code.<\/p>\n\n<p>Similar to the <code>u<\/code> flag, the <code>y<\/code> flag is a syntax change, so it will cause a syntax error in older JavaScript engines. You can use the same approach to detect support:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">function<\/code> <code class=\"nx\">hasRegExpY<\/code><code class=\"p\">()<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">try<\/code> <code class=\"p\">{<\/code>\n <code class=\"kd\">var<\/code> <code class=\"nx\">pattern<\/code> <code class=\"o\">=<\/code> <code class=\"k\">new<\/code> <code class=\"nb\">RegExp<\/code><code class=\"p\">(<\/code><code class=\"s2\">\".\"<\/code><code class=\"p\">,<\/code> <code class=\"s2\">\"y\"<\/code><code class=\"p\">);<\/code>\n <code class=\"k\">return<\/code> <code class=\"kc\">true<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">catch<\/code> <code class=\"p\">(<\/code><code class=\"nx\">ex<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"k\">return<\/code> <code class=\"kc\">false<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code>\n<code class=\"p\">}<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>Also similar to <code>u<\/code>, if you need to use <code>y<\/code> in code that runs in older JavaScript engines, be sure to use the <code>RegExp<\/code> constructor when defining those regular expressions to avoid a syntax error.<\/p>\n\n<h4>Duplicating Regular Expressions<\/h4>\n\n<p>In ECMAScript 5, you can duplicate regular expressions by passing them into the <code>RegExp<\/code> constructor, such as:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">re1<\/code> <code class=\"o\">=<\/code> <code class=\"sr\">\/ab\/i<\/code><code class=\"p\">,<\/code>\n <code class=\"nx\">re2<\/code> <code class=\"o\">=<\/code> <code class=\"k\">new<\/code> <code class=\"nb\">RegExp<\/code><code class=\"p\">(<\/code><code class=\"nx\">re1<\/code><code class=\"p\">);<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>However, if you provide the second argument to <code>RegExp<\/code>, which specifies the flags for the regular expression, then an error is thrown:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">re1<\/code> <code class=\"o\">=<\/code> <code class=\"sr\">\/ab\/i<\/code><code class=\"p\">,<\/code>\n\n <code class=\"c1\">\/\/ throws an error in ES5, okay in ES6<\/code>\n <code class=\"nx\">re2<\/code> <code class=\"o\">=<\/code> <code class=\"k\">new<\/code> <code class=\"nb\">RegExp<\/code><code class=\"p\">(<\/code><code class=\"nx\">re1<\/code><code class=\"p\">,<\/code> <code class=\"s2\">\"g\"<\/code><code class=\"p\">);<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>If you execute this code in an ECMAScript 5 environment, you\u2019ll get an error stating that the second argument cannot be used when the first argument is a regular expression. ECMAScript 6 changed this behavior such that the second argument is allowed and will override whichever flags are present on the first argument. For example:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">re1<\/code> <code class=\"o\">=<\/code> <code class=\"sr\">\/ab\/i<\/code><code class=\"p\">,<\/code>\n\n <code class=\"c1\">\/\/ throws an error in ES5, okay in ES6<\/code>\n <code class=\"nx\">re2<\/code> <code class=\"o\">=<\/code> <code class=\"k\">new<\/code> <code class=\"nb\">RegExp<\/code><code class=\"p\">(<\/code><code class=\"nx\">re1<\/code><code class=\"p\">,<\/code> <code class=\"s2\">\"g\"<\/code><code class=\"p\">);<\/code>\n\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">re1<\/code><code class=\"p\">.<\/code><code class=\"nx\">toString<\/code><code class=\"p\">());<\/code> <code class=\"c1\">\/\/ \"\/ab\/i\"<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">re2<\/code><code class=\"p\">.<\/code><code class=\"nx\">toString<\/code><code class=\"p\">());<\/code> <code class=\"c1\">\/\/ \"\/ab\/g\"<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">re1<\/code><code class=\"p\">.<\/code><code class=\"nx\">test<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"ab\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">re2<\/code><code class=\"p\">.<\/code><code class=\"nx\">test<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"ab\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">re1<\/code><code class=\"p\">.<\/code><code class=\"nx\">test<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"AB\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">re2<\/code><code class=\"p\">.<\/code><code class=\"nx\">test<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"AB\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ false<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>In this code, <code>re1<\/code> has the case-insensitive <code>i<\/code> flag present while <code>re2<\/code> has only the global <code>g<\/code> flag. The <code>RegExp<\/code> constructor duplicated the pattern from <code>re1<\/code> and then substituted <code>g<\/code> for <code>i<\/code>. If the second argument was missing then <code>re2<\/code> would have the same flags as <code>re1<\/code>.<\/p>\n\n<h4>The <code>flags<\/code> Property<\/h4>\n\n<p>In ECMAScript 5, it\u2019s possible to get the text of the regular expression by using the <code>source<\/code> property, but to get the flag string requires parsing the output of <code>toString()<\/code>, such as:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">function<\/code> <code class=\"nx\">getFlags<\/code><code class=\"p\">(<\/code><code class=\"nx\">re<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"kd\">var<\/code> <code class=\"nx\">text<\/code> <code class=\"o\">=<\/code> <code class=\"nx\">re<\/code><code class=\"p\">.<\/code><code class=\"nx\">toString<\/code><code class=\"p\">();<\/code>\n <code class=\"k\">return<\/code> <code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">substring<\/code><code class=\"p\">(<\/code><code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">lastIndexOf<\/code><code class=\"p\">(<\/code><code class=\"s2\">\"\/\"<\/code><code class=\"p\">)<\/code> <code class=\"o\">+<\/code> <code class=\"mi\">1<\/code><code class=\"p\">,<\/code> <code class=\"nx\">text<\/code><code class=\"p\">.<\/code><code class=\"nx\">length<\/code><code class=\"p\">);<\/code>\n<code class=\"p\">}<\/code>\n\n<code class=\"c1\">\/\/ toString() is \"\/ab\/g\"<\/code>\n<code class=\"kd\">var<\/code> <code class=\"nx\">re<\/code> <code class=\"o\">=<\/code> <code class=\"sr\">\/ab\/g<\/code><code class=\"p\">;<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">getFlags<\/code><code class=\"p\">(<\/code><code class=\"nx\">re<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ \"g\"<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>ECMAScript 6 adds a <code>flags<\/code> property to go along with <code>source<\/code>. Both properties are prototype accessor properties with only a getter assigned (making them read-only). The addition of <code>flags<\/code> makes it easier to inspect regular expressions for both debugging and inheritance purposes.<\/p>\n\n<p>A late addition to ECMAScript 6, the <code>flags<\/code> property returns the string representation of any flags applied to a regular expression. For example:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">var<\/code> <code class=\"nx\">re<\/code> <code class=\"o\">=<\/code> <code class=\"sr\">\/ab\/g<\/code><code class=\"p\">;<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">re<\/code><code class=\"p\">.<\/code><code class=\"nx\">source<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ \"ab\"<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nx\">re<\/code><code class=\"p\">.<\/code><code class=\"nx\">flags<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ \"g\"<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>Using <code>source<\/code> and <code>flags<\/code> together allow you to extract just the pieces of the regular expression that are necessary without needing to parse the regular expression string directly.<\/p>\n\n<h3>Object.is()<\/h3>\n\n<p>When you want to compare two values, you\u2019re probably used to using either the equals operator (<code>==<\/code>) or the identically equals operator (<code>===<\/code>). Many prefer to use the latter to avoid type coercion during the comparison. However, even the identically equals operator isn\u2019t entirely accurate. For example, the values +0 and -0 are considered equal by <code>===<\/code> even though they are represented differently in the JavaScript engine. Also <code>NaN === NaN<\/code> returns <code>false<\/code>, which necessitates using <code>isNaN()<\/code> to detect <code>NaN<\/code> properly.<\/p>\n\n<p>ECMAScript 6 introduces <code>Object.is()<\/code> to make up for the remaining quirks of the identically equals operator. This method accepts two arguments and returns <code>true<\/code> if the values are equivalent. Two values are considered equivalent when they are of the same type and have the same value. In many cases, <code>Object.is()<\/code> works the same as <code>===<\/code>. The only differences are that +0 and -0 are considered not equivalent and <code>NaN<\/code> is considered equivalent to <code>NaN<\/code>. Here are some examples:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"o\">+<\/code><code class=\"mi\">0<\/code> <code class=\"o\">==<\/code> <code class=\"o\">-<\/code><code class=\"mi\">0<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"o\">+<\/code><code class=\"mi\">0<\/code> <code class=\"o\">===<\/code> <code class=\"o\">-<\/code><code class=\"mi\">0<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nb\">Object<\/code><code class=\"p\">.<\/code><code class=\"nx\">is<\/code><code class=\"p\">(<\/code><code class=\"o\">+<\/code><code class=\"mi\">0<\/code><code class=\"p\">,<\/code> <code class=\"o\">-<\/code><code class=\"mi\">0<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ false<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"kc\">NaN<\/code> <code class=\"o\">==<\/code> <code class=\"kc\">NaN<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ false<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"kc\">NaN<\/code> <code class=\"o\">===<\/code> <code class=\"kc\">NaN<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ false<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nb\">Object<\/code><code class=\"p\">.<\/code><code class=\"nx\">is<\/code><code class=\"p\">(<\/code><code class=\"kc\">NaN<\/code><code class=\"p\">,<\/code> <code class=\"kc\">NaN<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"mi\">5<\/code> <code class=\"o\">==<\/code> <code class=\"mi\">5<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"mi\">5<\/code> <code class=\"o\">==<\/code> <code class=\"s2\">\"5\"<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"mi\">5<\/code> <code class=\"o\">===<\/code> <code class=\"mi\">5<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"mi\">5<\/code> <code class=\"o\">===<\/code> <code class=\"s2\">\"5\"<\/code><code class=\"p\">);<\/code> <code class=\"c1\">\/\/ false<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nb\">Object<\/code><code class=\"p\">.<\/code><code class=\"nx\">is<\/code><code class=\"p\">(<\/code><code class=\"mi\">5<\/code><code class=\"p\">,<\/code> <code class=\"mi\">5<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ true<\/code>\n<code class=\"nx\">console<\/code><code class=\"p\">.<\/code><code class=\"nx\">log<\/code><code class=\"p\">(<\/code><code class=\"nb\">Object<\/code><code class=\"p\">.<\/code><code class=\"nx\">is<\/code><code class=\"p\">(<\/code><code class=\"mi\">5<\/code><code class=\"p\">,<\/code> <code class=\"s2\">\"5\"<\/code><code class=\"p\">));<\/code> <code class=\"c1\">\/\/ false<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>In most cases you will probably still want to use <code>==<\/code> or <code>===<\/code> for comparing values, as special cases covered by <code>Object.is()<\/code> may not affect you directly.<\/p>\n\n<h3>Block bindings<\/h3>\n\n<p>Traditionally, one of the tricky parts of JavaScript has been the way that <code>var<\/code> declarations work. In most C-based languages, variables are created at the spot where the declaration occurs. In JavaScript, however, this is not the case. Variables declared using <code>var<\/code> are <em>hoisted<\/em> to the top of the function (or global scope) regardless of where the actual declaration occurs. For example:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">function<\/code> <code class=\"nx\">getValue<\/code><code class=\"p\">(<\/code><code class=\"nx\">condition<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n\n <code class=\"k\">if<\/code> <code class=\"p\">(<\/code><code class=\"nx\">condition<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"kd\">var<\/code> <code class=\"nx\">value<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\"blue\"<\/code><code class=\"p\">;<\/code>\n\n <code class=\"c1\">\/\/ other code<\/code>\n\n <code class=\"k\">return<\/code> <code class=\"nx\">value<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">else<\/code> <code class=\"p\">{<\/code>\n\n <code class=\"c1\">\/\/ value exists here with a value of undefined<\/code>\n\n <code class=\"k\">return<\/code> <code class=\"kc\">null<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code>\n\n <code class=\"c1\">\/\/ value exists here with a value of undefined<\/code>\n<code class=\"p\">}<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>If you are unfamiliar with JavaScript, you might expect that the variable <code>value<\/code> is only defined if <code>condition<\/code> evaluates to true. In fact, the variable <code>value<\/code> is declared regardless. The JavaScript engine changes the function to look like this:<\/p>\n\n<div class=\"code-block\">\n<div class=\"highlight\"><pre><code class=\"kd\">function<\/code> <code class=\"nx\">getValue<\/code><code class=\"p\">(<\/code><code class=\"nx\">condition<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n\n <code class=\"kd\">var<\/code> <code class=\"nx\">value<\/code><code class=\"p\">;<\/code>\n\n <code class=\"k\">if<\/code> <code class=\"p\">(<\/code><code class=\"nx\">condition<\/code><code class=\"p\">)<\/code> <code class=\"p\">{<\/code>\n <code class=\"nx\">value<\/code> <code class=\"o\">=<\/code> <code class=\"s2\">\"blue\"<\/code><code class=\"p\">;<\/code>\n\n <code class=\"c1\">\/\/ other code<\/code>\n\n <code class=\"k\">return<\/code> <code class=\"nx\">value<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code> <code class=\"k\">else<\/code> <code class=\"p\">{<\/code>\n\n <code class=\"k\">return<\/code> <code class=\"kc\">null<\/code><code class=\"p\">;<\/code>\n <code class=\"p\">}<\/code>\n<code class=\"p\">}<\/code>\n<\/pre><\/div>\n\n<\/div>\n\n<p>The declaration of <code>value<\/code> is moved to the top (hoisted) while the initialization remains in the same spot. That means the variable <code>value<\/code> is actually still accessible from within the <code>else<\/code> clause, it just has a value of <code>undefined<\/code> because it hasn\u2019t been initialized.<\/p>\n\n<p>It often takes new JavaScript developers some time to get used to declaration hoisting and this unique behavior can end up causing",
"user_id": "1",
"6": "1",
"tags": "book,es6,js"
},
Environment
wallabag version 2.0.4
Installation via git wallabag
Last wallabag version that did not exhibit the issue (if applicable):
php version: 7
OS: Ubuntu
Shared hosting
MySQL
The text was updated successfully, but these errors were encountered:
While importing v1 entries in v2.0.4, from the console, I get errors
Here is the corresponding output
I've extracted the entry from the json file :
Environment
The text was updated successfully, but these errors were encountered: