JavaScript の this を理解する多分一番分かりやすい説明という記事を読んで、bind
メソッド (Function.prototype.bind
1)をビルトイン関数やビルトインメソッドと組み合わせて面白そうな例を作れないか考えてみたところ、RegExp.prototype.test
2とArray.prototype.filter
3と組み合わせ、文字列の配列で正規表現にマッチするものだけを取り出す例を思いついたので紹介します。
(2017/08/15追記)
"bind
メソッドは要らなかった" を追記しました
サンプル
文字列の配列から郵便番号の書式に合うものだけを取り出します
['123-413','213-3123','213-4212','4333-4343'].filter(RegExp.prototype.test.bind(/^[0-9]{3}-[0-9]{4}$/))
実行結果は以下の通りです
> ['123-413','213-3123','213-4212','4333-4343'].filter(RegExp.prototype.test.bind(/^[0-9]{3}-[0-9]{4}$/))
[ '213-3123', '213-4212' ]
RegExp.prototype.test
は/./.test
でも呼び出せるので、もう少しシンプルに書くこともできます
['123-413','213-3123','213-4212','4333-4343'].filter(/./.test.bind(/^[0-9]{3}-[0-9]{4}$/))
bind
メソッドでRegExp.prototype.test
のthis
を/^[0-9]{3}-[0-9]{4}$/
に強制しているので、/./
はtest
メソッドを呼び出すためだけにある正規表現リテラルということになります。
当初はArray.prototype.slice
が[].slice
で呼び出せるように、//.test
でも大丈夫だろうと思っていましたが、これはコメントアウトになってしまうので/./.test
のように何か1文字はスラッシュの間に必要となるようです。
実行結果は以下の通りです
> ['123-413','213-3123','213-4212','4333-4343'].filter(/./.test.bind(/^[0-9]{3}-[0-9]{4}$/))
[ '213-3123', '213-4212' ]
ECMAScript 6以上の仕様は使っていないので、Internet Explorer 11でも動作しました。
ブラウザ上のURLバーに直接打ち込むと、実行できます。
javascript:alert(['123-413','213-3123','213-4212','4333-4343'].filter(/./.test.bind(/^[0-9]{3}-[0-9]{4}$/)).join());
実行結果は以下の通りです
bind
メソッドは要らなかった
Array.prototype.filter
3の第2引数(省略可能)で、第1引数で指定されたコールバック関数のthisを束縛できるようです。
よって、bind
メソッドを使わずに標題のことを実現できました。
['123-413','213-3123','213-4212','4333-4343'].filter(RegExp.prototype.test,/^[0-9]{3}-[0-9]{4}$/)
bind
メソッドを使うよりもシンプルに書け、可読性もこちらの方が良いかと思います。
実行結果は以下の通りです
> ['123-413','213-3123','213-4212','4333-4343'].filter(RegExp.prototype.test,/^[0-9]{3}-[0-9]{4}$/)
[ '213-3123', '213-4212' ]