Zenn
🍣

便利な文字列メソッド

2023/04/24に公開
JavaScript
tech

MDN（ https://developer.mozilla.org/ja/docs/Web/JavaScript ）
を参考に勉強するように注意が入ったので、ここを教本にしていきます。
その為、抜粋しながら進めたいと思います。

今回はこちらです。

今回もブラウザーの開発者ツールを使用します。

文字列の長さを調べる

lengthプロパティを使用します。

let browserType = 'mozilla';
browserType.length;
// 7

７という数値が出ました。
"mozilla" は7文字だからです。

特定の文字列を扱う

角括弧記法([])を使用することで文字列中の任意の1文字が得られます。
角括弧を変数名の後ろに付け、その中に数値を入れることで、その番目にある文字が返ってきます。
コンピューターは1からではなく、0から数えるので、最初の１文字を取得するには下記の様に書きます。

let browserType = 'mozilla';
browserType.length;
browserType[0];
//'m'

文字列から最初の文字を見つけてアルファベット順に並べるときに使うことができます。
文字列の一番最後の文字を取得したいときは、lengthプロパティと組み合わせます。
"mozilla" の文字は７文字ですが、0から数えるので、最後の文字の位置は6になります。
よってlength-1とする必要があります。

let browserType = 'mozilla';
browserType.length;
browserType[browserType.length-1];
//'a'

'mozilla'から部分文字列を探して抽出する

1.文字列を絞り込む

探したい部分文字列を引数に取るindexOf()メソッドを使用することで可能です。

browserType.indexOf('zilla');
//2

上記のコードは２を返します。
なぜなら、'mozilla'の部分文字列"zilla"の開始位置が2(0〜２=3文字目)だからです。
このコードは一覧の中から'mozilla'を含むものだけを表示したい場合などに使用します。

browserType.indexOf('vanilla');
//-1

上記のコードは−１を返します。
なぜなら、部分文字列"vanilla"の中に 'mozilla'が見つからなかったからです。
対象の文字列中に部分文字が見つからない場合は、-1の値を返します。

部分文字列 'mozilla' を含まない/含む

browserType.indexOf('');を使用して、すべての文字列から見つける事ができます。

  • 部分文字列 'mozilla' を含まない場合===を使用します。
if(browserType.indexOf('mozilla') === -1) {
  // もし部分文字列 'mozilla' が含まれていない場合は、
  // 文字列で何かをします。
}
  • 部分文字列 'mozilla' を含む場合!==を使用します。
if(browserType.indexOf('mozilla') !== -1) {
  // もし部分文字列 'mozilla' が含まれている場合は、
  // 文字列で何かをします。
}

2.文字列の始まりと終わり

その文字列の始まりと終わりがわかれば、その部分文字列をslice()メソッドを使用することで抽出することができます。

browserType.slice(0,3);
//'moz'

上記のコードは "moz" という文字列を返します。
なぜなら、(１番目の引数：抽出を始める最初の位置,２番目の引数：抽出する最後の文字の直後の位置)だからです。
「(0,3)」というのが'mozilla'の部分文字列、4番目(0〜３=4文字目)の手前までの文字列が切り出されたので、3文字になりました。

3.文字列からある文字以降の残りの文字をすべて抽出

slice()メソッドを使用して、ある文字以降の残りの文字を抽出します。

browserType.slice(2);
//'zilla'

上記のコードは "zilla" という文字列を返します。
なぜなら、'mozilla'の部分文字列の2の位置にある文字は「z」であり、2番目の引数を指定していないため、3 文字目から最後までが表示されました。

大文字・小文字の切り替え

toLowerCase()、toUpperCase()を使用して、大文字・小文字の切り替えができます。

  • 大文字
let radData = 'My NaMe Is MuD';
radData.toUpperCase();
//'MY NAME IS MUD'
  • 小文字
let radData = 'My NaMe Is MuD';
radData.toLowerCase();
//'my name is mud'

文字列の一部を書き換える

replace()メソッドを使用することで、ある部分文字列を他の文字列に置き換えることができます。

let browserType = 'mozilla';
browserType.indexOf('vanilla');
browserType.replace('moz','van');
//'vanilla'

上記のコードは"vanilla"という文字を返します。
なぜなら、replace(対象の文字,置換する文字)だからです。
そのため、()の中の順番を入れ替えて記入すると下記の結果になります。

browserType.replace('van','moz');
//'mozilla'

見た目は書き変わっていますが、browserTypeの値は、"mozilla"のままです。
プログラムで変数browserTypeの値を実際に更新するには、演算の結果を変数に設定し直す必要があります。変数の内容を更新するためには　browserType = browserType.replace('moz','van');と書きます。

アクティブ学習の実例

1.挨拶を選別する

挨拶状に使用するメッセージの配列の中から、クリスマスのメッセージのみを選別し、並べ替え。

  1. まず、各メッセージがどうであればクリスマス(Christmas)メッセージとみなせるかを考えてください。こういうメッセージ中にはどんな文字列があり、それが存在するか判定するのにどんなメソッドが使えるでしょうか？
  2. それから、オペランド 1 演算子 オペランド 2 の形で条件を書いてください。その条件は左辺と右辺が等しいかというものでしょうか？もしくは左辺のメソッドの戻り値が、右辺であるかというものでしょうか。
  3. ヒント: 今回の場合、メソッドの戻り値の結果が何でないかを判定するとよいでしょう。
const list = document.querySelector('.output ul');
list.innerHTML = '';
let greetings = ['Happy Birthday!',
                 'Merry Christmas my love',
                 'A happy Christmas to all the family',
                 'You\'re all I want for Christmas',
                 'Get well soon'];

for (let i = 0; i < greetings.length; i++) {
  let input = greetings[i];
  // 以下の条件の括弧内の内容を書き換えて下さい
  if (greetings[i]) {
    let listItem = document.createElement('li');
    listItem.textContent = input;
    list.appendChild(listItem);
    }
  }
簡易説明

  • document.querySelector( CSSセレクタ )
    querySelector()はJavaScriptから任意のHTML要素を検出・取得することができるメソッドになります。

  • 指定する要素名.innerHTML = '';
    指定要素に変数の値を代入します。

  • greetingsは日本語で挨拶ですね。

  • for (初期化式; 条件式; 変化式){実行する文;}
    変化式のi++は「i = i + 1」

答え

    if (greetings[i].indexOf('Christmas') !== -1) {
    let result = input;
    let listItem = document.createElement('li');
    listItem.textContent = result;
    list.appendChild(listItem);
  }
説明
  • 今回は'mozilla'から部分文字列を探して抽出するの1.文字列を絞り込むで出た、下記を使用します。
    if(文字列.indexOf('検索したい文字列　')!== -1) {}
  • 編集前はlet result = greetings[i];を使用して挨拶を全て表示する様にしていましたが、今回はクリスマスのメッセージだけなので、let result = input;に変更になります。
  • document.createElement('li')のcreateElementメソッドはHTML要素をオブジェクト形式で指定した場所に追加する事ができます。'li'はlist itemの略で、箇条書きのリスト項目を表す要素です。
  • listItem.textContent = result;のtextContentプロパティは特定のノードに対して、ノード内のテキストを文字列で取得します。編集前はinputを使用していましたが、今回はクリスマスのメッセージだけなので、resultです。
  • list.appendChild(listItem);のappendChild()はNodeインターフェイスのメソッドで、指定された親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していた場合は、 appendChild()はその子ノードを現在の位置から新しい位置へ移動します。

2.単語の最初の文字を大文字に直す

最初の文字を大文字にし、残りをすべて小文字に変更。

  1. input 変数に入っている文字列全体を小文字に変換し、それを新しい変数に格納します。
  2. この新しい変数にある最初の文字を取り出し、さらに別の変数に格納します。
  3. その新しい変数を部分文字列とし、小文字ばかりの文字列にある最初の文字を置換して、大文字化します。この置換処理の結果を別の新しい変数に格納します。
  4. input 変数ではなく、最終結果が result 変数の値に代入されるよう修正します。
const list = document.querySelector('.output ul');
list.innerHTML = '';
let cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];
for(var i = 0; i < cities.length; i++) {
  var input = cities[i];
  // この下にコードを書いて下さい

  let result = input;
  let listItem = document.createElement('li');
  listItem.textContent = result;
  list.appendChild(listItem);
}

答え (＋の部分は書き換えです。)

  let lower = input.toLowerCase();
  let firstLetter = lower.slice(0,1);
  let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());
  ＋　let result = capitalized;
説明

- 編集前はlet result = input;を使用して、文字をinput変数に入れていましたが、let result = capitalized;に書き換えで最終結果がresult変数の値に代入するようにしています。

  • let lower = input.toLowerCase();でinput変数に入っている文字列全体を小文字に変換
  • let firstLetter = lower.slice(0,1);のslice(0,1)で初めの文字のみ選択。
  • let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());のfirstLetter.toUpperCase();で最初の文字を大文字にします。

3.既存の部分から新しい文字列を作成する

文字列にはデータ項目として、アルファベット3文字の駅コード、次にコンピューター読み取り用のデータ、次にセミコロン、そして人間が読める駅名が入っています。

  1. アルファベット 3 文字のコードを抽出し、新しい変数に格納します。
  2. セミコロンの文字インデックス番号を検索します。
    3.セミコロンの文字インデックス番号を参照位置にして、人が読める駅名を抽出し、新しい変数に格納します。
  3. この 2 つの新しい変数と文字列リテラルとを連結し、最終的な文字列を作成します。
  4. input 変数ではなく、この最終結果が result 変数の値に代入されるよう修正します。
const list = document.querySelector('.output ul');
list.innerHTML = '';
let stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
                'GNF576746573fhdg4737dh4;Greenfield',
                'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
                'SYB4f65hf75f736463;Stalybridge',
                'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];

for (var i = 0; i < stations.length; i++) {
  let input = stations[i];
  // この下にコードを書いてください

  let result = input;
  let listItem = document.createElement('li');
  listItem.textContent = result;
  list.appendChild(listItem);
}

答え （＋の部分は書き換えです。）

  let code = input.slice(0,3);
  let semiC = input.indexOf(';');
  let name = input.slice(semiC + 1);
＋ let result = code + ': ' + name;
説明
  • let code = input.slice(0,3);を使用し、3文字コードを抽出します。
  • let semiC = input.indexOf(';');を使用し、セミコロン(;)の場所を探します。
  • let name = input.slice(semiC + 1);先ほど探したセミコロンの次の文字から使用したいのでslice（semiC）に＋１を加えることで「人が読める駅名」を抽出します。
  • 編集前はlet result = input;を使用して、文字をinput変数に入れていましたが、let result = code + ': ' + name;に書き換えることで、見本の「MAN: Manchester Piccadilly
    」様な形の表示させます。

参考文献表

MDN『便利な文字列メソッド』
https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods （2023年4月24日閲覧）

Discussion