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

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

# 一部を使う系
- `includes`
- `indexOf`

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

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

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

```js
const text = 'Hello World!'

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

詳細は[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/includes)をご覧ください。

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

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

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

```js
const text = 'Hello World!'

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

詳細は[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf)をご覧ください。

# 置き換え
- `replace`
- `replaceAll`

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

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

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

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

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

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

詳細は[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace)をご覧ください。

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

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

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

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

詳細は[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll)をご覧ください。

# 文字列を切り出す

- `slice`
- `substring`

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

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

こちらは`Hello World`という文字列から、特定の位置の文字列を切り出す例です。
```js
const text = 'Hello World!'

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

詳細は[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/slice)をご覧ください。

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

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

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

詳細は[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substring#substring_と_slice_の違い)をご覧ください。


:::note warn
似たような役割のメソッドとして[`substr`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substr)が挙げられますが、こちらは**非推奨**となっています。
`substr`の使用は避け、代わりに`slice`や`substring`を使うようにしましょう。
:::

# その他
- `split`
- `trim`

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

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

例えば`  |  `でそれぞれの文字列が区切られたものを、`split`で配列に変換できます。
```js
const text = `ABC | Hello | test-test`

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

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

詳細は[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split)をご覧ください。

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

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

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

なお、ここで空白に分類されるのは以下があります。
- [ホワイトスペース](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Lexical_grammar#ホワイトスペース)
- [改行文字](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Lexical_grammar#改行文字)（`\n`など）

詳細は[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/trim)をご覧ください。

---

また、最初や最後の空白のみを削除するメソッドもあります。
- [`trimStart`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart): 最初にある空白を削除
- [`trimEnd`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd): 最後にある空白を削除