Java Scriptの基礎その19　JavaScriptの文字列操作基礎と応用

イントロダクション

JavaScriptには豊富な文字列操作のメソッドが用意されており、さまざまな用途に活用できます。この記事では、基本的な文字列操作から、実際のプログラムに役立つ応用までを、具体的なコード例とともに解説します。今回紹介するコードは、航空会社に関連した情報や操作を題材にしています。

文字列の基本操作

文字列のアクセスと長さの取得

まず、文字列内の特定の文字にアクセスする方法と、文字列の長さを取得する方法を見ていきます。

const airlineName = "Japan Airlines";
const planefamily = "A320";

console.log(planefamily[0]); // 'A'
console.log(planefamily[1]); // '3'
console.log(planefamily[2]); // '2'
console.log("B747"[0]); // 'B'

console.log(airlineName.length); // 13
console.log("B747".length); // 4

planefamilyの各文字にインデックスを用いてアクセスしています。airlineName.lengthで文字列の長さを取得できます。

文字列の検索

文字列内で特定の文字や部分文字列の位置を検索する方法です。

console.log(airlineName.indexOf("r")); // 6
console.log(airlineName.lastIndexOf("r")); // 6
console.log(airlineName.indexOf("z")); // -1

indexOfとlastIndexOfを使うことで、文字列内の最初と最後の出現位置を検索できます。

文字列の切り取り

文字列の一部を切り取る方法です。

console.log(airlineName.slice(6)); // 'Airlines'
console.log(airlineName.slice(6, 7)); // 'A'
console.log(airlineName.slice(0, airlineName.indexOf(" "))); // 'Japan'
console.log(airlineName.slice(airlineName.lastIndexOf(" ") + 1)); // 'Airlines'
console.log(airlineName.slice(-2)); // 'es'
console.log(airlineName.slice(1, -1)); // 'apan Airline'

sliceメソッドを使うことで、特定の位置から文字列を切り取ることができます。

実用的な文字列操作

座席の判定

飛行機の座席が真ん中かどうかを判定する例です。

const checkMiddleSeat = function (seat) {
  const s = seat.slice(-1);
  if (s === "B" || s === "E") console.log("あなたの席は真ん中です。");
  else console.log("あなたの席は窓際側か通路側です");
};
checkMiddleSeat("11B"); // 'あなたの席は真ん中です。'
checkMiddleSeat("23C"); // 'あなたの席は窓際側か通路側です'
checkMiddleSeat("03E"); // 'あなたの席は真ん中です。'

この関数は、座席番号の最後の文字をチェックして座席の位置を判定します。

文字列オブジェクトの特性

文字列がオブジェクトとして扱われるときの特性を確認します。

console.log(new String("山田太郎")); // [String: '山田太郎']
console.log(typeof new String("山田太郎")); // 'object'
console.log(typeof new String("山田太郎").slice(2)); // 'string'

new Stringで作成された文字列はオブジェクトですが、メソッドを適用すると元の文字列型に戻ります。

文字列の変換と正規化

文字列を大文字・小文字に変換する方法と、メールアドレスの比較です。

console.log(airlineName.toLowerCase()); // 'japan airlines'
console.log(airlineName.toUpperCase()); // 'JAPAN AIRLINES'

// 頭文字だけ大文字にする
const passengerName = "jOhN";
const passengerNameLower = passengerName.toLowerCase();
const passengerNameCorrect =
  passengerNameLower[0].toUpperCase() + passengerNameLower.slice(1);
console.log(passengerNameCorrect); // 'John'

// emailが同じか判断
const sampleEmail = "sample@email.com";
const compareEmail = "Sample@Email.com";
const normalizedEmail = compareEmail.toLowerCase().trim();
console.log(normalizedEmail); // 'sample@email.com'
console.log(sampleEmail === normalizedEmail); // true

toLowerCaseやtoUpperCaseを使って文字列の正規化ができます。

文字列の置換

文字列の一部を置換する方法です。

const directionLeft = "左方向です";
const friendlyDirectionRight = directionLeft
  .replace("左", "右")
  .replace("です", "だよ");
console.log(friendlyDirectionRight); // '右方向だよ'

const announcingGate = "23番搭乗ゲートにお越しください";
console.log(announcingGate.replace("ゲート", "口")); // '23番搭乗口にお越しください'
console.log(announcingGate.replace(/ゲート/g, "口")); // '23番搭乗口にお越しください'

replaceメソッドを使うことで、特定の文字列を別の文字列に置き換えることができます。

文字列に含まれるかの確認

文字列が特定の文字列を含むかどうかを確認する方法です。

const newAirbus = "Airbus A320neo";
console.log(newAirbus.includes("A320")); // true
console.log(newAirbus.includes("Boeing")); // false
console.log(newAirbus.startsWith("Airb")); // true

includesやstartsWithメソッドを使うことで、特定の文字列を含むかどうかを確認できます。

荷物のチェック

機内に持ち込む荷物の内容をチェックする例です。

const checkBaggage = function (declaration) {
  const boardingBaggage = declaration.toLowerCase();
  if (boardingBaggage.includes("knife") || boardingBaggage.includes("gun")) {
    console.log("You are NOT allowed on board");
  } else {
    console.log("Welcome aboard😊");
  }
};

checkBaggage("I have a knife in my bag"); // 'You are NOT allowed on board'
checkBaggage("I have a GUN in my bag"); // 'You are NOT allowed on board'
checkBaggage("I have a kNiFe in my bag"); // 'You are NOT allowed on board'
checkBaggage("I have a gunknife in my bag"); // 'You are NOT allowed on board'
checkBaggage("I have a dog in my bag"); // 'Welcome aboard😊'

荷物の内容をチェックし、危険物が含まれているかどうかを判定します。

文字列の分割と結合

文字列の分割

文字列を指定した区切り文字で分割する方法です。

console.log("と+て+も+良い+天気+で+す+ね".split("+")); // ['と', 'て', 'も', '良い', '天気', 'で', 'す', 'ね']
console.log("Origa Yakovleva".split(" ")); // ['Origa', 'Yakovleva']

splitメソッドを使うことで、文字列を指定した区切り文字で分割することができます。

文字列の結合

分割した文字列を結合する方法です。

const [firstName, lastName] = "Origa Yakovleva".split(" ");
const newName = ["Ms.", firstName, lastName.toUpperCase()].join(" ");
console.log(newName); // 'Ms. Origa YAKOVLEVA'

joinメソッドを使うことで、分割した文字列を再度結合することができます。

名前のキャピタライズ

複数の単語からなる名前の各単語の頭文字を大文字にする方法です。

const capitalizeName = function (name) {
  const nameList = name.split(" ");
  const namesUpper = [];
  for (const n of nameList) {
    namesUpper.push(n.replace(n[0], n[0].toUpperCase()));
  }
  console.log(namesUpper.join(" "));
};

capitalizeName("sarah jessica parker"); // 'Sarah Jessica Parker'
capitalizeName("oRiga yakoVleva"); // 'Origa Yakovleva'

各単語の頭文字を大文字に変換することで、名前をキャピタライズします。

その他の便利な文字列操作

文字列のパディング

文字列の前後に特定の文字を追加する方法です。

const omedetoMessage = "おめでとう";
console.log(omedetoMessage.padStart(20, "✨").padEnd(30, "✨")); // '✨✨✨✨✨✨✨✨✨おめでとう✨✨✨✨✨✨✨✨✨✨'
console.log("おめでとう".padStart(20, "✨").padEnd(30, "✨")); // '✨✨✨✨✨✨✨✨✨おめでとう✨✨✨✨✨✨✨✨✨✨'

padStartやpadEndメソッドを使うことで、文字列の前後に特定の文字を追加できます。

クレジットカード番号のマスキング

クレジットカード番号の一部をマスキングする方法です。

const maskCreditCard = function (number) {
  const startingPoint = number + "";
  const endingPoint = startingPoint.slice(-4);
  return endingPoint.padStart(startingPoint.length, "*");
};
console.log(maskCreditCard(375987000000088)); // '************0088'

クレジットカード番号の一部を隠すことで、セキュリティを向上させます。

文字列の繰り返し

文字列を指定した回数だけ繰り返す方法です。

const badWeatherMessage =
  "現在、悪天候により全てのフライトが遅延しております。";
console.log(badWeatherMessage.repeat(5)); // '現在、悪天候により全てのフライトが遅延しております。現在、悪天候により全てのフライトが遅延しております。現在、悪天候により全てのフライトが遅延しております。現在、悪天候により全てのフライトが遅延しております。現在、悪天候により全てのフライトが遅延しております。'

const planesInLine = function (n, i) {
  console.log(`ただいま${n}機の機体が待機中です。`.repeat(i));
};

planesInLine(5, 1); // 'ただいま5機の機体が待機中です。'
planesInLine(4, 2); // 'ただいま4機の機体が待機中です。' x 2
planesInLine(3, 3); // 'ただいま3機の機体が待機中です。' x 3

repeatメソッドを使うことで、文字列を指定した回数だけ繰り返すことができます。

まとめ

この記事では、JavaScriptの基本的な文字列操作から、実際に役立つ応用例までを紹介しました。これらのメソッドを理解し、適切に使うことで、効率的で読みやすいコードを書くことができます。文字列操作は多くの場面で必要とされるため、ぜひ活用してください。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！