More than 3 years have passed since last update.

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

JavaScript

Last updated at 2021-08-21Posted at 2021-08-16

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

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

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

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

・JavaScriptに限らず、サロゲートペア¹や結合文字列などの落とし穴があるので、基本は明示的にケアする必要があります。
日曜プログラミングの範疇では無視っててもよいと思いますが、世に出すものであればケアしときましょう。

1. 部分文字列の取得

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

機能	メソッドなど
指定位置の１文字の文字列を得る	`charAt(位置)` または `文字列[位置]`
指定位置からN文字分の文字列を得る	`substr(start,N)` ※非推奨 ²
指定位置`start`から指定位置`end`までの文字列を得る (`end`を含まない)	`substring(start,end)` ³ または `slice(start,end)` ⁴
先頭からN文字分の文字列を得る	`substring(0,N)` または `slice(0,N)`
指定位置から末尾までの文字列を得る	`substring(start)` または `slice(start)`
末尾からN文字分の文字列を得る(N>0)	`slice(-N)`
末尾N文字分を削った文字列を得る(N>0)	`slice(0,-N)`
長さ（文字数）を取得する	`length`

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

See the Pen by kob58im (@kob58im) on CodePen.

参考：
javascriptのStringのsubstring slice substr - Qiita

1-2. 空白の除去

機能	メソッドなど	備考
先頭と末尾の空白文字を除去	`trim()`	対象となる「空白」は、半角の空白だけではないので注意
先頭の空白文字を除去	`trimStart()`	同上
末尾の空白文字を除去	`trimEnd()`	同上

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

機能	メソッドなど	備考
区切り文字で分割	`split(区切り文字列)`	区切り文字列の代わりに正規表現を指定可能

2. 文字列の連結

機能	メソッドなど	備考
文字列と文字列を連結する	`+`演算子	数値と文字列を`+`で連結すると、数値は文字列に変換されてから連結される
（同上）	`concat()`	※`concat`メソッドは遅いらしい
同じ文字列を繰り返した文字列を生成する	`repeat(繰り返し回数)`
文字列配列の結合	`配列.join(区切り文字列)`
変数や式の埋め込み（テンプレート文字列）	`なんちゃら${変数や式}かんちゃら`

3. 大文字小文字変換

機能	メソッドなど	備考
小文字に変換する	`toLowerCase`	変換対象はA-ZのみでなくÙや全角Ａ－Ｚなども対象
大文字に変換する	`toUpperCase`	変換対象はa-zのみでなくùや全角ａ－ｚなども対象

4. 数値と文字列の変換

機能	メソッドなど	備考
文字列を数値に変換する	`Number(文字列)`
数値を文字列に変換する	`String(数値)`	new String(数値)としてしまうと、比較演算でハマる恐れがあるので注意
基数(N進数のN)を指定して文字列を整数値に変換する	`parseInt(文字列,基数N)`	注意事項多数（リンク先参照）
基数(N進数のN)を指定して整数値を文字列に変換する	`数値.toString(基数N)`

5. 桁合わせ

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

機能	メソッドなど
先頭側に指定文字列を補填する（右揃え）	`padStart(指定文字数,指定文字列)` ⁵
末尾側に指定文字数を補填する（左揃え）	`padEnd(指定文字数,指定文字列)` ⁵

6. 文字列の比較・検索

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

機能	メソッドなど	備考
内容が同一か調べる	`==`演算子	要注意事項⁶
内容が同一、かつ、型も同一か調べる	`===`演算子	要注意事項⁶。`==`と`===`の違い
２つの文字列の順序関係を比較	`<`, `>`, `<=`, `>=`演算子	コードポイントをもとに比較
２つの文字列の順序関係を比較して結果を数値（正、`0`、負）で返す	`localeCompare(比較対象文字列)`	第２引数、第３引数により、言語などの条件を指定可能
文字列を末尾に向かって検索し、見つかった位置を返す	`indexOf(検索文字列,検索開始位置)`	見つからない場合は`-1`を返す。検索開始位置は省略可（先頭から検索）
文字列を先頭に向かって検索し、見つかった位置を返す	`lastIndexOf(検索文字列,検索開始位置)`	見つからない場合は`-1`を返す。検索開始位置は省略可（末尾から検索）。検索位置より末尾側の文字列も検索対象となるので注意
検索文字列で始まっているかを調べる	`startsWith(検索文字列)`	第２引数に検索開始位置（先頭とみなす位置）を指定可能
検索文字列で終わっているかを調べる	`endsWith(検索文字列)`
検索文字列が含まれているか調べる	`includes(検索文字列)`	第２引数に検索開始位置を指定可能
正規表現にマッチするかどうかを返す	`正規表現.(検査対象文字列)`
正規表現にマッチするかどうかを調べ、マッチした最初の位置を返す	`search(正規表現)`	見つからない場合は`-1`を返す

参考：

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

match
matchAll
search
split

7. 文字コード関連

7-1. UTF-16, Unicode

機能	メソッドなど
指定位置の文字の UTF-16 コードユニット値⁷を得る	`charCodeAt(位置)`
指定位置の文字の Unicodeポイント値を得る	`codePointAt(位置)`
UTF-16 コードユニット値から文字列を得る	`String.fromCharCode(値,値,値,・・・)`
同上	`String.fromCharCode(...配列)` ⁸
同上	`String.fromCharCode.apply(null,配列)` ⁸
Unicodeポイント値から文字列を得る	`String.fromCodePoint(値,値,値,...)`
同上	`String.fromCodePoint(...配列)` ⁸
同上	`String.fromCodePoint.apply(null,配列)` ⁸
Unicode 正規化形式を得る	`normalize(形式)`

See the Pen by kob58im (@kob58im) on CodePen.

参考：

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

準備中

参考：

7-3. UTF-8

| 機能 | メソッドなど | in | out |
|----|----|----|----|----|
| 文字コードのbyte配列に変換 | new TextEncoder().encode(文字列) | String(USV) | Uint8Array |
| 文字コードのbyte配列から文字列に変換 | new TextDecoder().decode(バッファ) | ArrayBuffer or ArrayBufferView | String(DOMString) |

TextEncoder() - Web API | MDN

8. エスケープいろいろ

8-1. URIエスケープ

機能	メソッドなど
URI全体をエンコードする	`encodeURI(文字列)`
URIの一部を渡してエンコードする	`encodeURIComponent(文字列)`
`encodeURI`に対する逆操作	`decodeURI(文字列)`
`encodeURIComponent`に対する逆操作	`decodeURIComponent(文字列)`

変換に失敗すると例外URIErrorを吐くので、適宜ケアすること。

参考：escape と encodeURI と encodeURIComponent を正しく使い分ける

8-2. HTMLエスケープ

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

参考：JavaScriptでHTMLエスケープ処理 - Qiita

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

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

参考：JavaScriptで正規表現文字列をエスケープする方法 | 綺麗に死ぬITエンジニア

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

準備中

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

raw

9. データ変換

9-1. Base64変換

| 機能 | メソッドなど | in | out |
|----|----|----|----|----|
| Base64エンコード | btoa(文字列) | String(ASCII) | String(バイナリ) |
| Base64デコード | atob(文字列) | String(バイナリ) | String(ASCII) |

参考：Javascript： uint8配列をbase64エンコード文字列に変換する方法は？ | Code Hero

x. 言語仕様

参考サイト

簡単に（雑に）いうと、見た目は１文字なのに２文字分のデータとして扱われるヤベーやつです。
参考：サロゲートペア・結合文字列・合字 - Qiita ↩
substringかsliceを使って代用するのがよいらしいが、第２引数の役割などが違うので単純置き換えはできない。 ↩
end < start の場合、start と end を入れ替えた値で処理される。 ↩
end < start の場合、長さ0の文字列を返す。詳細仕様 ↩
指定文字列を省略すると空白(" ")が使用される ↩ ↩²
オブジェクト同士の比較は、文字列としての内容が一致していても結果がfalseとなる場合があるため要注意（文字列比較をするのであればnew String()は極力使わないのが無難） →MDNに記載されているサンプル ↩ ↩²
0～65535 ↩
配列のサイズが大きいとスタックオーバーフローを引き起こす場合がある。→対応策 ↩ ↩² ↩³ ↩⁴

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up