JavaScriptで文字列を操作する

2021年2月3日2021年4月6日JavaScript

JavaScriptで文字列を操作のまとめです。

JavaScriptで文字列の基本操作

文字を一文字ずつ取得する

{
//文字を一文字ずつ取得する
const plane = 'D456';

console.log(plane[0]); //D
console.log(plane[1]); //4
console.log(plane[2]); //5
}

文字列を直接書いて文字を取得する

{
//文字列を直接書いて文字を取得する
const airline = 'JAL Air Japan';
console.log('Japan'[2]); //p
}

文字列の文字数を取得する

{
//文字列の文字数を取得する
const airline = 'JAL Air Japan';
console.log(airline.length); //13
}

文字列を直接書いて文字数を取得する

{
//文字列を直接書いて文字数を取得する
const airline = 'JAL Air Japan';
console.log('Japan'.length); //5
}

Stringのメソッド:indexof

{
//Stringのメソッド
//配列にとても良く似たメソッドがある

//indexof = 指定した最初にでてくる文字を取得
const airline = 'JAL Air Japan';

console.log(airline.indexOf('A')); //1
console.log(airline.indexOf('Air')); //4
console.log(airline.indexOf('air')); //-1 (見つからない場合は-1を返す)
}

Stringのメソッド:lastIndexOf

{
//lastIndexof = 指定した最後にでてくる文字を取得
const airline = 'JAL Air Japan';
console.log(airline.lastIndexOf('A')); //4
}

Stringのメソッド:slice

{
//sliceメソッド = 第一引数を指定することでそこから始まる文字列を取得
const airline = 'JAL Air Japan';
console.log(airline.slice(4)); //Air Japan

//sliceメソッド = 第二引数を指定で終わりを決める
//注意点としては、指定した文字は含まれないという点
//7 = ''空白
const airline = 'JAL Air Japan';
console.log(airline.slice(4, 7)); //Air

//マイナス数字で最後から指定した文字数を取得
const airline = 'JAL Air Japan';
console.log(airline.slice(-2)); //an
}

indexOfとsliceを組み合わせる

{
//indexOfとsliceを組み合わせる
const airline = 'JAL Air Japan';
console.log(airline.slice(0, airline.indexOf(' '))); //JAL
console.log(airline.slice(airline.lastIndexOf(' ') + 1)); //Japan
//+1を外すと空白まで入る' Japan'
}

JavaSciptで文字列を操作する具体例

{
//実用例
//最後の文字はaかbの場合プレゼントを渡すとします。
const checkPresent = function (ticket) {
  const lastLetter = ticket.slice(-1);
  if (lastLetter === 'a' || lastLetter === 'b') {
    console.log('おめでとう');
  } else {
    console.log('残念');
  }
};
checkPresent('71g');//残念
checkPresent('21a');//おめでとう
checkPresent('53b');//おめでとう
}

lengthで文字数を知る

文字列の文字数を知りたいときに使えるのが、lengthで調べるといいです。

{
  const mojiretsu = 'great';
  console.log(mojiretsu.length);
}

substringで部分文字列を取得する

substringで部分文字列を取得することができます。

第一引数には開始位置、代二引数には終了位置をかくことで、部分文字列を取得できます。
インデックス番号と同じ、0番目から数えていくので、指定する際には注意が必要です。
また、終了位置を設定した手前の文字までを取得できるという点も、注意が必要です。

{
  const mojiretsu = 'great';
  //mojiretsu.substring(開始位置, 終了位置);
  console.log(mojiretsu.substring(2, 4));//ea
}

また、文字列に対して配列のような記法を使うと、
インデックス番号の指定でその文字を取得することができます。

{
  const mojiretsu = 'great';
  console.log(mojiretsu[2]);//e
}

注意点としては、配列と全く同じではなく、ただ上のように文字列を取得できるというだけという点です。
つまり、たとえば、配列のように、mojiretsu[1]に対して新たな値を設定することはできません。
またmojiretsuに対してforEach()を使うこともできません。

join()の使い方

配列の要素を文字列として結合する命令が、join()です。
dateに対してjoinという命令を使って、引数にはその結合部分に入れたいものを指定する。

{
  const birthday = [2021, 11, 12];
  console.log(birthday.join('/'));//2021/11/12
}

結合部分に"のように空文字を設定すると、仕切りなしにすることもできます。

{
  const birthday = [2021, 11, 12];
  console.log(birthday.join(''));//20211112
}

split()の使い方

区切り文字のところで分割して配列にしたいというときは、split()という命令を使います。

{
  const birthday = '2020/11/19';
  console.log(birthday.split('/'));//[2020, 11, 19]
}

定数birthdayにsplitを指定して、引数として仕切り文字を指定すると分割できます。
また、
分割代入を使うと、年、月、日という定数で取り出すこともできます。

{
  const birthday = '2020/11/19';
  const [year, month, day] = birthday.split('/');

  console.log(year); //2020
  console.log(month); //11
  console.log(day); //19
}

split()メソッドと分割代入とjoin()メソッド

{
split
console.log('yamada+takayuki'.split('+'));
//(2) ["yamada", "takayuki"]配列として取得

//split()メソッドと分割代入
const [lastName, firstName] = 'yamada+takayuki'.split('+');
console.log(lastName);//yamada
console.log(firstName);//takayuki

//join
console.log([firstName[0].toUpperCase(), firstName.slice(1).toLowerCase()].join(''));
}

toLowerCase()メソッド

{
toLowerCase()
const cafe = 'Coffee and Tea';
console.log(cafe.toLowerCase()); //coffee and tea
}

toUpperCase()メソッド

{
toUpperCase()
const cafe = 'Coffee and Tea';
console.log(cafe.toUpperCase()); //COFFEE AND TEA
}

最初の文字を大文字にする

{
const capitalizeName = function(name) {
  const names = name.split(' ');
  const namesUpper = [];

  for(const n of names) {
    // namesUpper.push(n[0].toUpperCase() + n.slice(1));
    //上の方法か下の方法で最初の文字を大文字にできる
    namesUpper.push(n.replace(n[0], n[0].toUpperCase()));
  }
  console.log(namesUpper.join(' '));
}
capitalizeName('takagi yamada sasaki tomori tom davis');
Takagi Yamada Sasaki Tomori Tom Davis
}

おかしな英語表記を修正する

{
const customer = 'yAmaDa'; //Yamada
const customerLower = customer.toLowerCase();
const customerCorrent = customerLower[0].toUpperCase() + customerLower.slice(1);
console.log(customerCorrent);//Yamada
}

trim()メソッド

メールアドレスを確認する
大文字を直したい
スペースを取り除きたい
改行\nを取り除きたい

{

const email = 'aaaaa@eeew.asd';
const loginEmail = '  Aaaaa@eeew.asd \n';

const lowerEmail = loginEmail.toLowerCase();
const trimmedEmail = lowerEmail.trim();
console.log(trimmedEmail);//aaaaa@eeew.asd

//loginEmail.toLowerCase()というものがstringになるので、次のようにもかける
const normalizeEmail = loginEmail.toLowerCase().trim();
console.log(normalizeEmail);//aaaaa@eeew.asd
}

replace()メソッドとrelaceAll()メソッド

replace()メソッドは、指定した値のもので、最初に見つかった値を指定した値に変更します。

relaceAll()メソッドは、指定した値のもので、見つかった値すべてを指定した値に変更します。

{
const priceWrong = '100,45JJP';
const priceCorrect = priceWrong.replace('JJP', 'JPY').replace(',','.');
console.log(priceCorrect);//100.45JPY

const str = '髪の上に髪を置いてください。';
console.log(str.replace('髪', '紙'));//紙の上に髪を置いてください。
//ひとつしか変換されない。

console.log(str.replaceAll('髪', '紙'));//紙の上に紙を置いてください。

//正規表現
console.log(str.replace(/髪/g, '紙'));//紙の上に紙を置いてください。
}

Booleans: includes()メソッド

{
//includes()
const car = 'B230new';
console.log(car.includes('230'));//true
console.log(car.includes('240'));//false
}

Booleans: startsWith()メソッドとendsWith()メソッド

startsWith()メソッドは、最初の値が正しい場合trueを返し、違う場合にfalseを返します。

endsWith()メソッドは、最後の値が正しい場合trueを返し、違う場合にfalseを返します。

{

  const plane = 'B230new';
//startsWith()
console.log(plane.startsWith('B2'));//true
console.log(plane.startsWith('B25'));//false
//endsWith()
console.log(plane.endsWith('new'));//true
console.log(plane.endsWith('neee'));//false

if (plane.startsWith('B') && plane.endsWith('new')) {
  console.log('最新機です');//最新機です
}
}

padStart()メソッドとpadEnd()メソッド

padStart()メソッドとpadEnd()メソッドはpaddingの機能です。

padStart()メソッドは最初に指定した文字を詰めます。

padEnd()メソッドは最後に指定した文字を詰めます。

padStart(28, '=’)とすると、文字列が28になるまで足りない分を指定した=で補ってくれます。

{

//Padding
const message = '2番のゲートへお向かいください。';
console.log(message.padStart(28, '='));
//============2番のゲートへお向かいください。

const tom = 'Tom';
console.log(tom.padStart(7, '-').padEnd(11, '+'));
// ----Tom++++

padStart()メソッドでクレジットカード番号を隠す

//文字列にする 
 const maskCreditCard = function(num) {
   const str = String(num);
 　const last = str.slice(-4);
 　return last.padStart(str.length, '*');
 } 
console.log(maskCreditCard('111111111111111111')); 
//**************1111 console.log(maskCreditCard(3716524780)); 
//******4780 console.log(maskCreditCard(8883182228480)); 
//*********8480 
}

repeat()メソッド

{

//repeat
const hello = 'こんにちは!!';
console.log(hello.repeat(3));//こんにちは!!こんにちは!!こんにちは!!
}

文字列をアンダースコアからキャメルケースに変更する

textareaに入力された文字列をアンダースコアからキャメルケースに変更します。

document.body.append(document.createElement('textarea'));
document.body.append(document.createElement('button'));

document.querySelector('button').addEventListener('click', function () {
  const text = document.querySelector('textarea').value;
  const rows = text.split'\n');
//文字列を改行で分ける。

  for (const [index, row] of rows.entries()) {//◇の数を増やせるようにentriesでindex番号を取得する
    const [first, second] = row.toLowerCase().trim().split('_');//

    const output = `${first}${second.replace(
      second[0],
      second[0].toUpperCase()
    )}`;
//second.slice(0,1).toUpperCase() + second.slice(1);でも頭文字を大文字にできる
    console.log(`${output.padEnd(20)}${'◇'.repeat(index + 1)}`);
  }
// orange_aPPle
// java_javascRIPT  
//   ruby-on_rails
//    php_Php
});

JavaScirptの文字列のボクシング(boxing coercion)について

なぜ文字列なのにメソッドをもっているのか？
文字列はプリミティブ型ですので本来メソッドはもっていません。
オブジェクト型である配列やオブジェクトがメソッドを保持しています。
しかし、JavaScriptではプリミティブ型である文字列を認識するとオブジェクト型であるStringオブジェクトに変換します。
文字列をオブジェクトという箱にいれることから、このことをボクシング(boxing coercion)といいます。
そのためオブジェクトとしてメソッドを使うことができます。
参考までに下がオブジェクトになっているという証明です。

{
console.log(new String('Japan'));//オブジェクトになる
console.log(typeof new String('Japan'));//object
console.log(typeof new String('Japan').slice(3));//stringに戻る
}