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

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

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

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

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

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

console.log(splitBank);
//(3) ["Mitsubishi", "UFJ", "Bank"]
```
splitBankは配列なので、変数を3つ用意すればそれぞれ分割代入できます。

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

console.log(companyName2);
//UFJ
      
console.log(companyName3);
//Bank
```

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

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

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

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

```javascript
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()メソッドで次のように書き換えることもできます。

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

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

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

console.log(friendNames.padEnd(30, "+"));
//john messy louis jessy++++++++
```
そして、次のようにメソッドチェーンとして繋げることもできます。この場合、合計文字数は40文字になります。

```javascript
console.log(friendNames.padStart(30, "+").padEnd(40, "+"));
//++++++++john messy louis jessy++++++++++
```
これを応用すれば、クレジットカードで下桁4文字を除いた残りの部分を*にすることもできます。

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

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

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

```javascript
const repeatMessage = "起きなさい!";
console.log(repeatMessage.repeat(10));
//起きなさい!起きなさい!起きなさい!起きなさい!起きなさい!起きなさい!起きなさい!起きなさい!起きなさい!起きなさい!
```
テンプレートリテラルで次のように繰り返したい絵文字🚗 を関数で定義して使ってみると面白いです。

```javascript
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