文字列操作

【JavaScript】文字列切り出しの覚書

更新日：2023/04/21

自分、最近記憶力が低下してきたのか、JavaScriptで文字列を位置指定で部分文字列を切り出すメソッドを記憶できません。
毎回調査するのが面倒になってきたので、方法をまとめておきます。

切り出しメソッドは３つ

文字列から位置指定で部分文字列を切り出すメソッドは、３つあります。

substring()

substring()は、次のように定義されています。

String.prototype.substring ( start, end )

• start:
  startは、次の計算が適用されます。
  1. 非数値のとき、start = 0
  2. start = min( max(start, 0), 文字列長 )
• end:
  endは、次の計算が適用されます。
  1. undefined のとき、end = 文字列長
  2. 非数値のとき、end = 0
  3. end = min( max(end , 0), 文字列長 )

計算により start > end となった場合、値が交換されます。

console.log( "0123456789".substring( 2 , 4 ) );   // "23"
console.log( "0123456789".substring( 2 ) );       // "23456789"
console.log( "0123456789".substring( 2 , "1" ) ); // "1"
console.log( "0123456789".substring( 4 , 2  ) );  // "23"
console.log( "0123456789".substring( -2 , 2  ) ); // "01"

slice()

slice()は、次のように定義されています。

String.prototype.slice( start, end )

• start:
  startは、次の計算が適用されます。
  1. 非数値のとき、start = 0
  2. 0より大きいとき、start = min(start, 文字列長)
  3. 0より小さいとき、start = max(文字列長 + start, 0)
• end:
  endは、次の計算が適用されます。
  1. undefined のとき、end = 文字列長
  2. 非数値のとき、end = 0
  3. 0より大きいとき、end = min(end, 文字列長)
  4. 0より小さいとき、end = max(文字列長 + end, 0)

切り出す文字数が max( end - start, 0)　で計算されます。
そして、startから、その文字数分（コードユニット単位）だけ切り出されます。

console.log( "0123456789".slice( 2 , 4 ) );     // "23"
console.log( "0123456789".slice( 2 ) );         // "23456789"
console.log( "0123456789".slice( 2 , "1" ) );   // ""
console.log( "0123456789".slice( 4 , 2  ) );    // ""
console.log( "0123456789".slice( -8 , 7) );     // "23456"
console.log( "0123456789".slice( -8 , -5) );    // "234"

substr()

substr()はレガシー機能となっていて、現在のJavaScript仕様（ECMAScript）に含まれていません。
ただし同仕様で、ブラウザ上で動作するJavaScriptではレガシー機能を動作させるために組み込むよう指示されています。

そのため将来的に削除される可能性があるので、使用しない方がよさそうです。

解説はします。

substr()は、次のように定義されています。

String.prototype.substr( start, length )

• start:
  startは、次の計算が適用されます。
  1. 非数値のとき、start = 0
  2. 0より小さいとき、start = max(文字列長 + start, 0)
• length:
  lengthは、次の計算が適用されます。
  1. undefined のとき、end = 無限大
  2. 非数値のとき、end = 0
  3. end = min( max(end, 0), 文字列長 - start)
  4. end < 0 なら、end = 0

コードポイントのサロゲートペア問題

文字列の切り出しは、コードユニット単位で行われます。

しかし文字によっては複数のコードユニットで一つの文字を構成するものがあります。
サロゲートペアと呼ばれるものですね。

サロゲートペアが含まれる文字列は、今回紹介したメソッドで正常に切り出しをおこなえません。
文字数が合わなかったり、文字化けをおこします。

const text = "🐈🐶🐑"; // 絵文字はサロゲートペア
console.log( text.substring( 0,1 ) ); // � ←文字化け
console.log( text.slice( 0,1 ) );     // �
console.log( text.substr( 0,1 ) );    // �

そのため、今回紹介したメソッドはサロゲートペアが含まれない文字列で使用する必要があります。

「ムリ」というときは、別の方法を考えます。

↓こんな感じ

const substring2 = (text,start,end) => 
    [...text].slice(start,end+1).join("");

[...text]で、一文字単位（コードユニット単位）で文字列が配列化されます。
次にslice()で配列から指定範囲の文字を抜き出して、join()で連結しています。

他にも良い方法があると思うので、いろいろ試してみてください。

関連記事

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。