【JavaScript】文字列のメソッドって何があるの？

この記事では、私が個人的によく使うと思っている文字列のメソッドを、独断と偏見でピックアップして紹介します。

一部を使う系

• includes
• indexOf

includes

文字列の中に特定の文字列が含まれるかどうかを調べます。

• 引数: 含まれるか調べたい文字列
• 戻り値: 含まれるかどうかを示すboolean値

含まれるというのは、例えばHello World!にHelloとWorld!は含まれますが、Hi!は含まれません。

const text = 'Hello World!'

text.includes('Hello') // true
text.includes('World!') // true
text.includes('Hi!') // false

詳細はMDNをご覧ください。

indexOf

指定された文字列がある位置を返します。

• 引数: 調べたい文字列
• 戻り値: どの位置かを示す数値
  • 見つからなかったら-1

例えばHello World!の中のlloは2、Worldは6になります。
また、Hi!は存在しないので-1が返ってきます。

const text = 'Hello World!'

text.indexOf('llo') // 2
text.indexOf('World') // 6
text.indexOf('Hi!') // -1

詳細はMDNをご覧ください。

置き換え

• replace
• replaceAll

replace

指定された文字列または正規表現に一致する部分を探し、その部分を指定された文字列に置き換えます。

• 引数:
  1. pattern: 置き換えたい場所を示す正規表現 or 文字列
  2. replacement: patternの位置を置き換えたい文字列
• 戻り値: 置き換えた後の文字列

const str = 'Hello World!'
str.replace('World', 'JavaScript') // Hello JavaScript!

第一引数patternに入れられるのは、正確にはSymbol.replaceメソッドを持つものです。
これは例えば正規表現（RegExp）があります。

また、Symbol.replaceを持たないものは文字列に変換されます。

なお、replaceは最初にpatternが出てきた場所しか置き換えません。
文字列内の全てを置き換えたい場合は、次のreplaceAllが使えます。

詳細はMDNをご覧ください。

replaceAll

replaceに似ていますが、これは文字列内に出てくる全てのpatternを置き換えます。
引数と戻り値はreplaceと同じです。

replaceAllは例えばHTMLタグの簡単なエスケープに使えます。

const html = '<p>Hello World!</p>'

html
  .replaceAll('<', '&lt;') // < を &lt; に置き換える
  .replaceAll('>', '&gt;') // > を &gt; に置き換える
// '&lt;p&gt;Hello World!&lt;/p&gt;'

詳細はMDNをご覧ください。

文字列を切り出す

• slice
• substring

slice

切り出しを開始 / 終了する位置のインデックスを受け取り、その位置で切り出した文字列を返します。

• 引数:
  • indexStart: 切り出しを開始する位置
  • indexEnd: 切り出しを終了する位置（省略可能）
    • 省略した場合、indexStartから最後までが切り出される
• 戻り値: 切り出された文字列

こちらはHello Worldという文字列から、特定の位置の文字列を切り出す例です。

const text = 'Hello World!'

text.slice(2, 5) // 'llo'
text.slice(7) // 'World!'

詳細はMDNをご覧ください。

substring

sliceと基本的には同じですが、いくつか違いがあります。

項目	slice	substring
負の数	最後から数える	0として扱う
indexEnd > indexStartのとき	空文字列を返す	逆転して扱う

個人的にはsliceがあるので、こちらはあまり使わないと思っています。

詳細はMDNをご覧ください。

似たような役割のメソッドとしてsubstrが挙げられますが、こちらは非推奨となっています。
substrの使用は避け、代わりにsliceやsubstringを使うようにしましょう。

その他

• split
• trim

split

文字列を特定の文字列で分割した配列を返します。

• 引数: 分割に使う文字列
• 戻り値: 分割した配列

例えば | でそれぞれの文字列が区切られたものを、splitで配列に変換できます。

const text = `ABC | Hello | test-test`

// |前後の半角スペースを忘れずに
text.split(' | ') // ['ABC', 'Hello', 'test-test']

これ以外にも、改行文字\nで区切られた文章を分割する（str.split('\n')）などの用途があります。

詳細はMDNをご覧ください。

trim

前後にある余分な空白を削除します。

• 引数: なし
• 戻り値: 最初と最後の空白を削除した文字列

const str = ' hello world   ';
str.trim() // 'hello world'

なお、ここで空白に分類されるのは以下があります。

• ホワイトスペース
• 改行文字（\nなど）

詳細はMDNをご覧ください。

---

また、最初や最後の空白のみを削除するメソッドもあります。

• trimStart: 最初にある空白を削除
• trimEnd: 最後にある空白を削除