６時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

2021年11月23日 JavaScript (JS Primer)　文字列

JavaScript

文字列の比較

文字列の比較には===（厳密比較演算子）を利用します。 次の条件を満たしていれば同じ文字列となります。

  • 文字列の要素であるCode Unitが同じ順番で並んでいるか
  • 文字列の長さ（length）は同じか
// "A"と"B"のCode Unitは65と66
console.log("A".charCodeAt(0)); // => 65
console.log("B".charCodeAt(0)); // => 66
// "A"（65）は"B"（66）よりCode Unitの値が小さい
console.log("A" > "B"); // => false
// 先頭から順番に比較し C > D が falseであるため
console.log("ABC" > "ABD"); // => false

文字列同士を比較した場合コードユニットの値で比較が行われます。

文字列の一部を取得

String#sliceメソッド

  • 第一引数に開始位置、第二引数に終了位置を指定し、その範囲を取り出した新しい文字列を返します。
  • 第二引数は省略でき、省略した場合は文字列の末尾が終了位置となります。

※ ポイントは第二引数で指定したひとつまでを切り取るというところです。 主観ですが、sliceメソッド=切り出すという表現で覚えると思い出しやすいと感じます。玉葱をスライスするとなると、切るという意味なので直感的に記憶を紐付けられるかと感じます。

位置にマイナスの値を指定した場合は文字列の末尾から数えた位置となります。 また、第一引数の位置が第二引数の位置より大きい場合、常に空の文字列を返します。

const str = "ABCDE";
console.log(str.slice(1)); // => "BCDE"
console.log(str.slice(1, 5)); // => "BCDE"
// マイナスを指定すると後ろからの位置となります。
console.log(str.slice(0)); // => "E"
// インデックスが1から4の範囲を取り出しています。
console.log(str.slice(1, 4)); // => "BCD"
// 第一引数 > 第二引数の場合、常に空文字列を返します。
console.log(str.slice(4, 1)); // => ""

String#substring

上記のsliceメソッドと挙動はほとんど同じです。 違いはマイナスで指定した全ての数値の引数が0として扱われるということです。(-1)でも(-100)でもマイナスである以上は全て(0)となるという事です。

indexOfメソッドとの併用

次のコードでは、?の位置をindexOfメソッドで取得し第一引数に指定し、第二引数を指定しない事でそれ以降の文字列をsliceメソッドで切り出しています。

const url = "https://example.com?param=1";
const indexOfQuery = url.indexOf("?");
const queryString = url.slice(indexOfQuery);
console.log(queryString); // => "?param=1"
  • indexOfQueryにはindexOfメソッドで取り出した19という数値が入ります。
  • sliceメソッドの引数に先程のindexofQueryを入れることで、19番目以降の文字を取り出してくれています。

文字列による検索

文字列の検索の結果として取得したい値によって使うメソッドを使い分けます。 取得できる結果は3つあります。

  • index番号
  • 検索した文字列自体
  • boolean（真偽値）

String#indexOfメソッド（indexを取得したい場合）

引数で渡した文字列に最初に一致したindexを返します。一致しない場合は-1を返します。

// 検索対象となる文字列
const str = "にわにはにわにわとりがいる";
// indexOfは先頭から検索しインデックスを返します。
//  - "**にわ**にはにわにわとりがいる"
// "にわ"の先頭のインデックスを返すため 0 となります。
console.log(str.indexOf("にわ")); // => 0

String#includes,startsWith,endsWithメソッド（booleanを取得したい場合）

// 検索対象となる文字列
const str = "にわにはにわにわとりがいる";
// startsWith - 検索文字列が先頭ならtrue
console.log(str.startsWith("にわ")); // => true
console.log(str.startsWith("いる")); // => false
// endsWith - 検索文字列が末尾ならtrue
console.log(str.endsWith("にわ")); // => false
console.log(str.endsWith("いる")); // => true
// includes - 検索文字列が含まれるならtrue
console.log(str.includes("にわ")); // => true
console.log(str.includes("いる")); // => true
実行

UnicodeとCode Unit

Unicodeはすべての文字に対してID（Code Point）を振ることを目的に作成されている仕様です。 Unicodeでは1文字を表すのに使う最小限のビットの組み合わせをCode Unit（符号単位）と呼ぶ。

Unicode は仕様　　

Code Unitは一文字を表しているもの

とすると覚えやすいかもしれません。

Unicodeは16進数に基づく表で表現されます。

const str = "アオイ";
// それぞれの文字をCode Unitのhex値（16進数）に変換します。
// toStringの引数に16を渡すと16進数に変換されます。
console.log(str.charCodeAt(0).toString(16)); // => "30a2"
console.log(str.charCodeAt(1).toString(16)); // => "30aa"
console.log(str.charCodeAt(2).toString(16));  // => "30a4"

文字列を比較するときは、このコードユニットを整数として表現し比較します。

参考

JSprimer 文字列