【PR】を含みます。

フロントエンド

【JavaScript】文字列の後方一致を判定する方法5選

JavaScript 文字列の後方一致を判定する方法5選

JavaScriptでファイルの拡張子チェックやURLの末尾確認など、「文字列が特定の単語や文字列で終わっているか」を判定したい場面は多くあります。

本記事では、よく使われる5つの後方一致判定方法を具体例とともにわかりやすく解説します。

用途や環境に合わせて最適な方法を選べるようになりますので、ぜひ参考にしてください。

JavaScriptで文字列の前方一致を判定する方法は以下の記事で紹介しています。

あわせて読む
JavaScript 文字列の前方一致を判定する方法6選

【JavaScript】文字列の前方一致を判別する方法6選

もくじstartsWith()メソッドで前方一致を判定正規表現(RegExp)を使って前方一致を判定indexOf()メソッドで前方一致を判定slice()メソッドで前方一致を判定substring( ...

JavaScriptで文字列の部分一致を判定する方法は以下の記事で紹介しています。

あわせて読む
JavaScript 特定の文字列を含むかを確認する方法7選

【JavaScript】特定の文字列を含むかを確認する方法7選

もくじincludes()メソッドで部分一致を判別正規表現(RegExp)を使って部分一致を判別indexOf()メソッドで部分一致を判別search()メソッドで部分一致を判別match()メソッド ...

endsWith()メソッドで後方一致を判定

JavaScriptで後方一致を判定する最も簡単な方法は、endsWith()メソッドを使用することです。

endsWith()メソッドは、文字列と指定した文字列を比較し「後方一致」している場合にtrueを返します。

シンプルで直感的な方法なので、可読性にも優れています。

endsWith()メソッドのブラウザ別対応状況は以下から確認できます。

https://caniuse.com/?search=endswith

JavaScript
Copy
const str = 'JavaScript is awesome!';
console.log(str.endsWith('awesome!')); // true
console.log(str.endsWith('Awesome!')); // false

正規表現(RegExp)を使って後方一致を判定

endsWith()メソッドよりも柔軟な後方一致判定を行いたい場合は、正規表現を使用することで実現可能です。

例えば、大文字・小文字を無視した後方一致の判定が可能です。

/awesome!$/は文字列がawesome!で終わっているかどうかを判定する正規表現です。

iフラグを使うと、大文字・小文字を無視した後方一致が判定できます。

JavaScript
Copy
const str = 'JavaScript is awesome!';
console.log(/awesome!$/.test(str)); // true
console.log(/Awesome!$/.test(str)); // false
console.log(/awesome!$/i.test(str)); // true(大文字小文字を無視する場合)
console.log(/Awesome!$/i.test(str)); // true(大文字小文字を無視する場合)

slice()メソッドで後方一致を判定

slice()メソッドを使い、文字列の最後の部分を取り出して後方一致を確認できます。

endsWith()メソッドがサポートされていない古いブラウザで後方一致を判定したい場合に有効です。

以下はslice()メソッドを使用して、文字列の最後8文字を切り出し、それを比較することで後方一致を判定します。

JavaScript
Copy
const str = 'JavaScript is awesome!';
console.log(str.slice(-8) === 'awesome!'); // true
console.log(str.slice(-8) === 'Awesome!'); // false

lastIndexOf()メソッドで後方一致を判定

lastIndexOf()メソッドを使用し、文字列の最後に一致するかを確認します。

見つかったインデックスがstr.length - 8に等しい場合、後方一致していることになります。

JavaScript
Copy
const str = 'JavaScript is awesome!';
console.log(str.lastIndexOf('awesome!') === str.length - 8); // true
console.log(str.lastIndexOf('Awesome!') === str.length - 8); // false

substring()メソッドで後方一致を判定

substring()メソッドもslice()メソッドと同じように、文字列の末尾部分を切り出して比較することで後方一致を定できます。

JavaScript
Copy
const str = 'JavaScript is awesome!';
console.log(str.substring(str.length - 8) === 'awesome!'); // true
console.log(str.substring(str.length - 8) === 'Awesome!'); // false

【まとめ】どの後方一致判定方法を使うべきか?

今回紹介した5つの方法の中で、最もシンプルで読みやすいのは endsWith()メソッドですが、古いブラウザに対応していないというデメリットがあります。

また、使用するブラウザ環境や判定の厳密さによっては、lastIndexOf()メソッドや正規表現も有効です。

用途に応じて、最適な後方一致判定方法を選ぶ必要があります。

  • 最新ブラウザが対象
    endsWith()メソッドが一番シンプルで可読性にも優れている。

  • 大文字・小文字を無視した後方一致
    正規表現(RegExp)がおすすめです。

  • 古いブラウザへの対応
    lastIndexOf()メソッドやslice()メソッドも安定しています。

JavaScriptで文字列の前方一致を判定する方法は以下の記事で紹介しています。

あわせて読む
JavaScript 文字列の前方一致を判定する方法6選

【JavaScript】文字列の前方一致を判別する方法6選

もくじstartsWith()メソッドで前方一致を判定正規表現(RegExp)を使って前方一致を判定indexOf()メソッドで前方一致を判定slice()メソッドで前方一致を判定substring( ...

JavaScriptで文字列の部分一致を判定する方法は以下の記事で紹介しています。

あわせて読む
JavaScript 特定の文字列を含むかを確認する方法7選

【JavaScript】特定の文字列を含むかを確認する方法7選

もくじincludes()メソッドで部分一致を判別正規表現(RegExp)を使って部分一致を判別indexOf()メソッドで部分一致を判別search()メソッドで部分一致を判別match()メソッド ...

-フロントエンド
-