【JavaScript】文字列③ 〜文字列の取得、検索〜

概要

JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。

「【JavaScript】JavaScript入門一覧」に他の記事をまとめています。

この記事で理解できること

• 指定した文字列の取得、検索方法

文字列の一部を取得

以下のメソッドで文字列から一部を取得できる。

• sliceメソッド
• substringメソッド

これらのメソッドを使用する場合、

• 指定するインデックスは0以上
• 第二引数を指定する場合は第一引数の位置 < 第二引数の位置にする

ことが推奨される(詳細はそれぞれのメソッドの挙動を理解すると分かる)

sliceメソッド

• 第一引数に開始位置、第二引数に終了位置を指定し、その範囲を取り出した新しい文字列を返す。
• 返される文字列には、第二引数に指定した位置の文字は含まないことに留意。
• 位置の引数にマイナス値を指定した場合は末尾から検索する。
• 第一引数の位置が第二引数の位置より大きい場合、常に空の文字列を返す(開始位置が終了位置よりも前を指定する)。
• 第二引数は省略でき、省略した場合は文字列の末尾が終了位置となる。

const str5 = "ABCDE";

// BCを取得してみる
console.log(str5.slice(1, 3));  // => BC

// 末尾から検索する
console.log(str5.slice(-4, 3)); // => BC

// 第二引数を省略
console.log(str5.slice(1));     // => BCDE

// 開始位置が終了位置よりも大きい
console.log(str5.slice(2, 1));  // => ""

substringメソッド

• 基本的に、指定する引数や指定した範囲の新しい文字列が返されるなどsliceメソッドと同じ。
• 異なる点として、位置にマイナスの値を指定した場合は常に0として扱われる。
• また、第一引数の位置が第二引数の位置より大きい場合、第一引数と第二引数が入れ替わるという挙動になる。

const str6 = "ABCDE";

// BCを取得してみる
console.log(str6.substring(1, 3));  // => BC

// マイナス値を指定する(-4は0として扱われる)
console.log(str6.substring(-4, 3)); // => ABC

// 第二引数を省略
console.log(str6.substring(1));     // => BCDE

// 開始位置が終了位置よりも大きい(第一引数が1、第二引数が2と内部的に置き換えられている)
console.log(str6.substring(2, 1));  // => B

文字列の検索

• 文字列の検索方法として大きく文字列による検索、正規表現による検索に分類される。
• 取得したい結果ごとにメソッドが用意されている。

文字列による検索

• 文字列によるインデックスの取得
• 文字列にマッチした文字列の取得
• 真偽値の取得

文字列によるインデックスの取得(indexOf、lastIndexOfメソッド)

• 指定した文字列で検索し、最初に現れたインデックスを返す。
• 内部的に厳密等価演算子（===）で検索する。
• 一致する文字列がない場合は、-1を返す。
• indexOfは先頭から、lastIndexOfは末尾から検索を行う。

const str7 = "ABCDEABCDE";

// 先頭から検索
console.log(str7.indexOf("BC"));      // => 1

// 末尾から検索
console.log(str7.lastIndexOf("BC"));  // => 6

// => 該当する指定文字が複数あっても、それぞれの検索ルートから最初に一致したインデックスを返している

文字列にマッチした文字列の取得(indexOfメソッド)

• 前項のindexOfメソッドに直接取得したい文字列を指定する。
• 存在する場合はインデックス、存在しない場合は-1が返され、判定結果として使用する。

const str8 = "Hello World";

console.log(str8.indexOf("Hello"));  // => 0
console.log(str8.indexOf("Good"));   // => -1

const search = "Hello";

if (str8.indexOf(search) !== -1) {
  // -1 じゃない = いずれかのインデックスが返されている
  console.log(`${search}は含まれています`);
} else {
 console.log(`${search}は含まれていません`); 
}
// => Helloは含まれています

真偽値の取得

• 検索文字列が先頭に存在するかの真偽値を返す(startsWithメソッド)
• 検索文字列が末尾に存在するかの真偽値を返す(endsWithメソッド)
• 検索文字列が含まれているかの真偽値を返す(includesメソッド)

const str9 = "ABCDEABCDE";

// 検索文字が先頭に存在するか
console.log(str9.startsWith("A")); // => true
console.log(str9.startsWith("C")); // => false

// 検索文字が末尾に存在するか
console.log(str9.endsWith("E"));  // => true
console.log(str9.endsWith("A"));  // => false

// 検索文字が含まれているか
console.log(str9.includes("E"));  // => true
console.log(str9.includes("F"));  // => false