JavaScript文字列操作関連 - 逆引きリファレンス的なやつ

例によって育てていきます。
永遠に完成しない説



# 0. 利用に関する注意事項

・あくまで実現手段の例であり、特定のメソッドの使用を推奨するものではありません。

・記載内容や参考サイトの内容について、動作検証等は検証しておりませんので、内容が誤っている可能性があります。動作確認等の検証を実施した上でご利用ください。（JavaScriptに関しては趣味で使っているレベルなので、トンデモなことを書いている可能性もあります。）

・JavaScriptに限らず、サロゲートペア[^1]や結合文字列などの落とし穴があるので、基本は明示的にケアする必要があります。
日曜プログラミングの範疇では無視っててもよいと思いますが、世に出すものであればケアしときましょう。
[^1]: 簡単に（雑に）いうと、見た目は１文字なのに２文字分のデータとして扱われるヤベーやつです。
参考： [サロゲートペア・結合文字列・合字 - Qiita](https://qiita.com/Nabetani/items/8c69bdd8060f2503683c)


# 1. 部分文字列の取得

# 1-1. 位置や長さを指定して取得

| 機能 | メソッドなど |
|----|----|
| 指定位置の１文字の文字列を得る | [`charAt(位置)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/charAt)  <br>または<br>  [`文字列[位置]`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String#character_access) |
| 指定位置からN文字分の文字列を得る | [`substr(start,N)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substr)<br>[※非推奨](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#string_methods) [^4] |
| 指定位置`start`から<br>指定位置`end`までの文字列を得る<br>(`end`を含まない) | [`substring(start,end)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substring) [^5] <br>または<br> [`slice(start,end)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substring) [^6] |
| 先頭からN文字分の文字列を得る | [`substring(0,N)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substring) <br>または<br> `slice(0,N)` | 
| 指定位置から末尾までの文字列を得る | [`substring(start)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substring) <br>または<br> `slice(start)` |
| 末尾からN文字分の文字列を得る(N>0) | [`slice(-N)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/slice#using_slice_with_negative_indexes) |
| 末尾N文字分を削った文字列を得る(N>0) | [`slice(0,-N)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/slice#using_slice_with_negative_indexes) |
| 長さ（文字数）を取得する | [`length`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/length) |

上記の`start`,`end`,`N`は、いずれも`0`以上の場合についての説明。ただし`-N`については`N>0`（`0`を含まない）ので要注意。

[^4]: `substring`か`slice`を使って代用するのがよいらしいが、第２引数の役割などが違うので単純置き換えはできない。
[^5]: `end < start` の場合、start と end を入れ替えた値で処理される。
[^6]: `end < start` の場合、長さ0の文字列を返す。[詳細仕様](https://tc39.es/ecma262/#sec-string.prototype.slice)

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="QWgLLYj" data-user="kob58im" style="height: 460px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kob58im/pen/QWgLLYj">
  </a> by kob58im (<a href="https://codepen.io/kob58im">@kob58im</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

参考：
[javascriptのStringのsubstring slice substr - Qiita](https://qiita.com/littlekbt/items/4a47f485391b6b45d96c)

# 1-2. 空白の除去

| 機能 | メソッドなど | 備考 |
|----|----|----|
| 先頭と末尾の空白文字を除去 | [`trim()`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/Trim) | 対象となる「空白」は、<br>半角の空白だけではないので注意 |
| 先頭の空白文字を除去 | [`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) | 同上 |

# 1-3. 区切り文字で分割

| 機能 | メソッドなど | 備考 |
|----|----|----|
| 区切り文字で分割  | [`split(区切り文字列)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split) | 区切り文字列の代わりに正規表現を指定可能 |

# 2. 文字列の連結

| 機能 | メソッドなど | 備考 |
|----|----|----|
| 文字列と文字列を連結する | `+`演算子 | 数値と文字列を`+`で連結すると、数値は文字列に変換されてから連結される | 
| （同上） | `concat()` | [※`concat`メソッドは遅いらしい](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/concat#performance) |
| 同じ文字列を繰り返した文字列を生成する | [`repeat(繰り返し回数)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/repeat) | |
| 文字列配列の結合 | [`配列.join(区切り文字列)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join) | |
| 変数や式の埋め込み（テンプレート文字列） | [`` `なんちゃら${変数や式}かんちゃら` ``](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals) | |

# 3. 大文字小文字変換

| 機能 | メソッドなど | 備考 |
|----|----|----|
| 小文字に変換する | [`toLowerCase`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase) | 変換対象はA-ZのみでなくÙや全角Ａ－Ｚなども対象 |
| 大文字に変換する | [`toUpperCase`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase) | 変換対象はa-zのみでなくùや全角ａ－ｚなども対象 |

# 4. 数値と文字列の変換

| 機能 | メソッドなど | 備考 |
|----|----|----|
| 文字列を数値に変換する | [`Number(文字列)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number) |  |
| 数値を文字列に変換する | [`String(数値)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/String#string_constructor_and_string_function) | <b>new</b> String(数値)としてしまうと、<br>[比較演算でハマる恐れがある](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Equality#comparing_strings_and_string_objects)ので注意 |
| 基数(N進数のN)を指定して<br>文字列を整数値に変換する | [`parseInt(文字列,基数N)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseInt) | 注意事項多数（リンク先参照） |
| 基数(N進数のN)を指定して<br>整数値を文字列に変換する | [`数値.toString(基数N)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) |

 - [【Javascript入門】数値⇔文字列の変換(toString/Number/parseInt) | 侍エンジニアブログ](https://www.sejuku.net/blog/23998)
 - [JavaScriptで文字列を数値に変換する：Number(), parseInt(), parseFloat() | UX MILK](https://uxmilk.jp/11582)


# 5. 桁合わせ

元の文字列が指定文字数に満たない場合、全体が指定文字数になるよう指定文字列で埋める。

| 機能 | メソッドなど |
|----|----|
| 先頭側に指定文字列を補填する（右揃え） | [`padStart(指定文字数,指定文字列)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/padStart) [^7] |
| 末尾側に指定文字数を補填する（左揃え） | [`padEnd(指定文字数,指定文字列)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd) [^7] |

[^7]: 指定文字列を省略すると空白(`" "`)が使用される

# 6. 文字列の比較・検索

基本的に、大文字小文字は区別されます。

| 機能 | メソッドなど | 備考 |
|----|----|----|
| 内容が同一か調べる | [`==`演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Equality#examples) | <b><font color="red">要注意事項</font>[^2] |
| 内容が同一、かつ、型も同一か調べる | [`===`演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality) | <b><font color="red">要注意事項</font>[^2]。[`==`と`===`の違い](https://developer.mozilla.org/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness#a_model_for_understanding_equality_comparisons) |
| ２つの文字列の順序関係を比較 | `<`, `>`, `<=`, `>=`演算子 | [コードポイントをもとに比較](https://www.javadrive.jp/javascript/ope/index11.html) |
| ２つの文字列の順序関係を比較して<br>結果を数値（正、`0`、負）で返す | [`localeCompare(比較対象文字列)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) | 第２引数、第３引数により、<br>言語などの条件を指定可能 |
| 文字列を末尾に向かって検索し、<br>見つかった位置を返す | [`indexOf(検索文字列,検索開始位置)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf) | 見つからない場合は`-1`を返す。<br>検索開始位置は省略可（先頭から検索） |
| 文字列を先頭に向かって検索し、<br>見つかった位置を返す | [`lastIndexOf(検索文字列,検索開始位置)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf) | 見つからない場合は`-1`を返す。<br>検索開始位置は省略可（末尾から検索）。<br>[検索位置より末尾側の文字列も検索対象となるので注意](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf#description) |
| 検索文字列で始まっているかを調べる | [`startsWith(検索文字列)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith) | 第２引数に検索開始位置<br>（先頭とみなす位置）を指定可能 |
| 検索文字列で終わっているかを調べる | [`endsWith(検索文字列)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith) | |
| 検索文字列が含まれているか調べる | [`includes(検索文字列)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/includes) | 第２引数に検索開始位置を指定可能 |
| 正規表現にマッチするかどうかを返す | [`正規表現.(検査対象文字列)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/search) | |
| 正規表現にマッチするかどうかを調べ、マッチした最初の位置を返す | [`search(正規表現)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/search) | 見つからない場合は`-1`を返す |

[^2]: オブジェクト同士の比較は、文字列としての内容が一致していても結果が`false`となる場合があるため要注意（文字列比較をするのであれば`new String()`は極力使わないのが無難） →[MDNに記載されているサンプル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Equality#comparing_strings_and_string_objects)

参考：

 - [【JavaScript入門】文字列を「比較」する演算子の使い方まとめ！ | 侍エンジニアブログ](https://www.sejuku.net/blog/21413)
 - [JavaScriptの文字列マッチングまとめ(indexOf, lastIndexOf) - Qiita](https://qiita.com/aqril_1132/items/9f69575bfbcf24bdf7b5)


【メモ】
Stringのメソッドにおいて正規表現に関連するもの

[`match`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match)
[`matchAll`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll)
[`search`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/search)
[`split`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split)


# 7. 文字コード関連

# 7-1. UTF-16, Unicode
| 機能 | メソッドなど |
|----|----|
| 指定位置の文字の <br>UTF-16 コードユニット値[^8]を得る | [`charCodeAt(位置)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt) |
| 指定位置の文字の <br>Unicodeポイント値を得る | [`codePointAt(位置)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt) |
| UTF-16 コードユニット値から<br>文字列を得る | [`String.fromCharCode(値,値,値,・・・)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode) |
| 同上 | `String.fromCharCode(`[`...配列`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)`)` [^3] |
| 同上 | `String.fromCharCode.`[`apply(null,配列)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) [^3] |
| Unicodeポイント値から<br>文字列を得る | [`String.fromCodePoint(値,値,値,...)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint) |
| 同上 | `String.fromCodePoint(`[`...配列`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)`)` [^3] |
| 同上 | `String.fromCodePoint.`[`apply(null,配列)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) [^3] |
| Unicode 正規化形式を得る | [`normalize(形式)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/normalize) |

[^3]: 配列のサイズが大きいとスタックオーバーフローを引き起こす場合がある。→[対応策](https://pisuke-code.com/js-soln-of-maximum-call-stack/)
[^8]: 0～65535

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="NWgKbyZ" data-user="kob58im" style="height: 270px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kob58im/pen/NWgKbyZ">
  </a> by kob58im (<a href="https://codepen.io/kob58im">@kob58im</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

参考：

- [charCodeAt と codePointAt の違い - キリウ君が読まないノート](https://note.kiriukun.com/entry/20180925-charcodeat-vs-codepointat)
- [JSのスプレッド構文を理解する - Qiita](https://qiita.com/akisx/items/682a4283c13fe336c547#%E9%85%8D%E5%88%97%E3%81%AE%E5%A0%B4%E5%90%88)

# 7-2. サロゲートペア対応いろいろ

準備中

参考：

 - [JavaScriptでのサロゲートペア文字列のメモ - Qiita](https://qiita.com/YusukeHirao/items/2f0fb8d5bbb981101be0)
 - [「サロゲートペア javascript」の検索結果 - Qiita](https://qiita.com/search?q=%E3%82%B5%E3%83%AD%E3%82%B2%E3%83%BC%E3%83%88%E3%83%9A%E3%82%A2+javascript&sort=rel)

# 7-3. UTF-8
| 機能 | メソッドなど | in | out |
|----|----|----|----|----|
| 文字コードのbyte配列に変換 | [`new TextEncoder().encode(文字列)`](https://developer.mozilla.org/ja/docs/Web/API/TextEncoder/encode) | [`String`(USV)](https://developer.mozilla.org/ja/docs/Web/API/USVString) | [`Uint8Array`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) |
| 文字コードのbyte配列から文字列に変換 | [`new TextDecoder().decode(バッファ)`](https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder/decode) | `ArrayBuffer` or [`ArrayBufferView`](https://developer.mozilla.org/en-US/docs/Web/API/ArrayBufferView) | [`String`(DOMString)](https://developer.mozilla.org/ja/docs/Web/API/DOMString) |

[TextEncoder() - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/TextEncoder/TextEncoder)

# 8. エスケープいろいろ

## 8-1. URIエスケープ


| 機能 | メソッドなど |
|----|----|
| URI全体をエンコードする | [`encodeURI(文字列)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURI) |
| URIの一部を渡してエンコードする | [`encodeURIComponent(文字列)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) |
| `encodeURI`に対する逆操作 | [`decodeURI(文字列)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/decodeURI) |
| `encodeURIComponent`に対する逆操作 | [`decodeURIComponent(文字列)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent) |

変換に失敗すると例外[`URIError`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/URIError)を吐くので、適宜ケアすること。

参考：[escape と encodeURI と encodeURIComponent を正しく使い分ける](https://aloerina01.github.io/blog/2017-04-28-1)

## 8-2. HTMLエスケープ

言語として用意されているメソッドは無いっぽい（？）

参考：[JavaScriptでHTMLエスケープ処理 - Qiita](https://qiita.com/saekis/items/c2b41cd8940923863791)

## 8-3. 正規表現エスケープ

言語として用意されているメソッドは無いっぽい（？）

参考：[JavaScriptで正規表現文字列をエスケープする方法 | 綺麗に死ぬITエンジニア](https://s8a.jp/javascript-escape-regexp#%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE%E6%96%87%E5%AD%97%E5%88%97%E3%82%92%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97%E3%81%99%E3%82%8B)

## 8-4. 文字列リテラルのエスケープ

準備中

ここに分類するのは違和感ある気もしますが・・

[`raw`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/raw)


# 9. データ変換

## 9-1. Base64変換

| 機能 | メソッドなど | in | out |
|----|----|----|----|----|
| Base64エンコード | [`btoa(文字列)`](https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/btoa) | `String`(ASCII) | `String`(バイナリ) |
| Base64デコード | [`atob(文字列)`](https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/atob) | `String`(バイナリ) | `String`(ASCII) |

参考：[Javascript： uint8配列をbase64エンコード文字列に変換する方法は？ | Code Hero](https://codehero.jp/javascript/12710001/how-to-convert-uint8-array-to-base64-encoded-string)

# x. 言語仕様

- [String - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String#string_primitives_and_string_objects)
- [テキスト処理 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Text_formatting)


# 参考サイト
 - [JavaScriptで文字列を扱う「String」の基本：JavaScript標準ライブラリの使い方超入門（2）（1/4 ページ） - ＠IT](https://atmarkit.itmedia.co.jp/ait/articles/1609/01/news012.html)
 - [JavaScriptの文字列操作（サンプル集でマスター） - Qiita](https://qiita.com/saka212/items/11ce1f1d6316c1fbf15b)
 - [JavaScriptでバイナリを扱いたい - Qiita](https://qiita.com/kareharide/items/93f0257ee5c31e239e63)
 - [非推奨の機能、廃止された機能 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features)