A240 文字列の連結・分割 – エアケント教育コンテンツ

JavaScriptでは文字列を連結・分割されるケースが多くあります。今回は文字列の連結や分割方法について紹介します。

文字列の連結方法

プラス演算子

プラス演算子「+」を用いると、文字列を結合します。

JavaScript

let animal = 'ねこ';
animal = animal + 'はかわいい！';
console.log(animal);
// "ねこはかわいい！" と出力されます。

concatメソッド

concatメソッドを用いると呼び出し元の文字列の後ろに引数に指定した文字列を追加します。

JavaScript

let animal = 'ねこ'；
animal = animal.concat('はかわいい！');
console.log(animal)；
// "ねこはかわいい！" と出力されます。

テンプレートリテラル

テンプレートリテラルを用いると改行文字をそのまま改行として入力できるほかに文字列の中に式や変数の値を埋め込めます。バッククォート(`)を用いて文字列全体を囲み、変数や数値を”${}”の中に指定すると文字列として展開されます。

JavaScript

let animal = 'ねこ'；
animal = `${animal}はかわいい！`;
console.log(animal) ；
// "ねこはかわいい！" と出力されます。

split()メソッド

splitメソッドを用いると文字列を指定の区切り文字で分割し、要素としてそれぞれ格納した配列を戻り値として返します。

JavaScript

let animals = 'cat,dog,bird';
let animalAry = animals.split(',');

console.log(animalAry);
// ["cat", "dog", "bird"]という配列が出力されます。

split()メソッドは多くの使い方があるので実現したいロジックが可能か確認しましょう。

以下の中で下記コードにて出力される文字列はどれか

JavaScript

let number = '1212';
number = number.concat('2121');
console.log(number);

回答

3. 12122121

concatメソッドは呼び出し元の文字列の後ろに引数に指定した文字列を追加するため

以下の中で下記コードにて出力される文字列はどれか

JavaScript

let number = '1212';
number = `${number} + 2121`;
console.log(number);

回答

4. 1212 + 2121

“+ 2121” は文字列のため数値としての足し算にはならないため

今回紹介したもの以外にも文字列の連結や分割を行うメソッドはあります。全てを覚える必要はないですが、自分自身でも検索してメソッドを確認する癖をつけましょう。