javascriptで特定の文字が含まれているか確認する【注意：matchとincludesの違い】

javascriptで特定の文字列が含まれているか確認する方法

javascriptにて特定の文字列が含まれている確認する方法を２つ紹介します、

もちろんjsにはその他にも判定する方法はたくさんありますが、
実際にはまってエラーを大量発生させたので、その原因となった２つのメソッドの正しくない利用方法も紹介します。

includesメソッド

includesメソッドは特定の文字列が含まれるか、含まれていないかをbool型で返してくれます。

example.com/category/cute/

console.log("------includes--------");
console.log(location.href.includes("/category/"));

【ブラウザ実装状況に注意】

非常に便利ですが、以前対応ブラウザを確認せずに利用して、
古いAndroidとiPhoneにて商品一覧が出ないというクレームにつながりました。

MDN web docsより引用

matchメソッド

【matchメソッドの戻り値は bool型ではないことに注意】

example.com/category/cute/

console.log(location.href.match("/category/"));

【categoryが含まれない場合は nullが返る】

example.com/

console.log(location.href.match("/category/"));

【matchメソッドで文字が含まれるか確認する方法】

example.com/category/cute/

console.log("------match--------");
console.log(location.href.match("/category/")!=null);

ただ、jsのnullはif文に入れるとfalse判定されるので入れなくても使える説がありますがあまりよろしくないように思えます

【ブラウザ実装状況】

ブラウザ実装状況は優良です。

js studioより引用

includesとmatchメソッドの違い

古いブラウザにも対応したい場合はmatchメソッド。
最新のブラウザだけ対応すればよく、綺麗に書きたいのであればincludesメソッド。

そもそもmatchメソッドには別の用途があるのでこれで判断するのが正しいとは言えませんが、そう使い分けたいと思います。

index.js

console.log("------match--------");
console.log(location.href.match("/category/")!=null);
console.log("------includes--------");
console.log(location.href.includes("/category/"));