【Javascript】Strings(3)学習ノート

初めに

Stringについて学習した内容のoutput用記事です。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。

前回の記事：
https://qiita.com/redrabbit1104/items/d68a8f79420a2a0320a6
https://qiita.com/redrabbit1104/items/75ff729fff8c51f97e86

文字列の分割

split()メソッドを使い、文字列を分割し配列に格納します。

const bank = "Mitsubishi UFJ Bank";
const splitBank = bank.split(" ");

console.log(splitBank);
//(3) ["Mitsubishi", "UFJ", "Bank"]

splitBankは配列なので、変数を3つ用意すればそれぞれ分割代入できます。

const [companyName1, companyName2, companyName3] = splitBank;
console.log(companyName1);
//Mitsubishi

console.log(companyName2);
//UFJ

console.log(companyName3);
//Bank

文字列の結合

join()メソッドで文字列を結合できます。対象になる文字列は配列の形になっている必要があります。

const joinBank = [
      companyName1.toUpperCase(),
      companyName2,
      companyName3.toUpperCase(),
    ].join("🌟");

console.log(joinBank);
//MITSUBISHI🌟UFJ🌟BANK

これを応用すればsplit()メソッドで文字列を分割し、for of文を使って最初の文字だけを大文字にし結果を返す関数を作れます。関数として定義するとどんな文字列でも最初の文字を大文字にすることができます。

const friendNames = "john messy louis jessy";

const uppercaseFirstLetter = (name) => {
  const names = name.split(" "); //名前を" "で分割し,names配列に格納
  const results = []; //結果を格納する

  for (const eachName of names) {
    results.push(eachName[0].toUpperCase() + eachName.slice([1]));
  }
  console.log(results.join(" "));  //配列のresultsにある値をjoinメソッドで結合
};

uppercaseFirstLetter(friendNames);
//John Messy Louis Jessy

また、名前を大文字にするところは、replace()メソッドで次のように書き換えることもできます。

//前略
  for (const eachName of names) {
    results.push(eachName.replace(eachName[0], eachName[0].toUpperCase()));
  }
//攻略

文字列を補う

文字列の全体の数を決め、残りの足りない文字数を指定した文字で補うることもできます。文字列の先頭から埋めていくか、末尾から埋めるかによってpadStart()かpadEnd()メソッドを使います。

console.log(friendNames.padStart(30, "+"));
//++++++++john messy louis jessy

console.log(friendNames.padEnd(30, "+"));
//john messy louis jessy++++++++

そして、次のようにメソッドチェーンとして繋げることもできます。この場合、合計文字数は40文字になります。

console.log(friendNames.padStart(30, "+").padEnd(40, "+"));
//++++++++john messy louis jessy++++++++++

これを応用すれば、クレジットカードで下桁4文字を除いた残りの部分を*にすることもできます。

const asteriskCardNumber = (card) => {
   const strCard = card + "";
   const showCardNumber = strCard.slice(-4);     
   console.log(showCardNumber.padStart(strCard.length, "*"));
};

asteriskCardNumber(12340499030223);
//**********0223
asteriskCardNumber("49892839048594");
//**********8594

文字列の繰り返し

repeat()メソッドで文字列を数分だけ繰り返し表示できます。

const repeatMessage = "起きなさい!";
console.log(repeatMessage.repeat(10));
//起きなさい!起きなさい!起きなさい!起きなさい!起きなさい!起きなさい!起きなさい!起きなさい!起きなさい!起きなさい!

テンプレートリテラルで次のように繰り返したい絵文字🚗 を関数で定義して使ってみると面白いです。

const cars = (num) => {
  console.log(`There are ${num} cars ${"🚗".repeat(num)} on the road.`);
};

cars(5);
//There are 5 cars 🚗🚗🚗🚗🚗 on the road.

参考サイト

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/repeat