知られてそうで知られてない少し知られてるECMAScript 2015 (ES6)の新機能: Days on the Moon

Kyoto.js #10で「知られてそうで知られてない少し知られてるECMAScript 2015 (ES6)の新機能」というライトニングトークをしたので、そのスライドに当日しゃべった内容や補足を追記して以下に掲載します。

自己紹介

ECMAScript 2015 (ECMA-262 6th Edtition)

クラス構文
アロー関数
ブロックスコープ
Promise
etc...

2015年にECMAScriptが大幅に改定されました。クラス構文やアロー関数の追加はあちこちで取り上げられているので皆さんご存知でしょうが、ここではあまり取り上げられていない地味な新機能を紹介します。

Unicodeの符号位置

// 〓

'\uD83C\uDF63';  // ES5
'\u{1F363}';     // ES6

String.fromCharCode(0xD83C, 0xDF63);  // ES5
String.fromCodePoint(0x1F363);        // ES6

JavaScriptの文字列はUTF-16符号化形式で表現されます。絵文字などBMP(基本多言語面)外の文字はサロゲートペアと呼ばれるふたつの符号単位の組み合わせで表現されるため、これまでエスケープシーケンスを使うときなどには符号単位(16ビット符号なし整数)ごとに指定する必要がありました。ES2015ではUnicodeの符号位置(U+0～U+10FFFFまでの値)を直接指定できるようになります。

Unicode正規化

'〓　１００ﾊﾟｰｾﾝﾄ'.normalize('NFKC');
// => '株式会社 100パーセント'

'神 森〓外'.normalize('NFC')
// => '神 森〓外'

Unicodeには結合文字などの表現形式をそろえる「正規化」という手順が定義されています。ES2015では文字列にnormalizeメソッドが追加され、NFCやNFKCといった複数種類の正規化を適用できるようになりました。

NFKCで文字列を正規化すると、組文字が個々の文字に展開されたり、全角英数字が半角に、半角カタカナが全角にそろえられたりします。正規化を行うことで「神」が「神」になるなど字体が変わってしまうこともあるので注意してください。

正規表現の`/u`フラグ(`unicode`オプション)

/^..$/.test('〓');  // => true
/^.$/u.test('〓');  // => true

/\p/.test('p');   // => true
/\p/u.test('p');  // => SyntaxError

これまで正規表現は符号単位ごとにマッチしていましたが、/uフラグを指定することで符号位置ごとにマッチするようになります。

また、未定義のメタ文字があったとき、これまでは\が無視されていましたが、/uフラグ下では構文エラーになります。これにより、将来新たなメタ文字を導入しても、既存の正規表現パターンの挙動が変わってしまうということがなくなります。将来の拡張性確保のためには重要な変更です。

正規表現の`/y`フラグ(`sticky`オプション)

let re = /bar/y;

re.test('foobar');  // => false

re.lastIndex = 3;
re.test('foobar');  // => true

通常正規表現マッチは部分一致ですが、/yフラグを付けると前方一致になります。/bar/.test('foobar')はマッチ成功となりますが/bar/y.test('foobar')はbarが先頭にないのでマッチ失敗となります。

前方一致といいましたが、より正確に言うと正規表現オブジェクトのlastIndexプロパティで指定した位置からの一致になります。上の例ではlastIndexに3を指定したので、fooの直後からマッチを試みることになり、マッチが成功しています。