実行環境 Node.js 15.2.1

公開日 March 11, 2021, GMT+9

コード例の出力としてconsole.logを使用しています。

使用方法がわからない場合は以下のページを参照してからコード例を確認してください。

console.logの使用方法

concat(String、文字列)

このページでは豊富な例を用いてJavaScript(js)のStringオブジェクトのconcatメソッドの使い方を学ぶことができます。

concatメソッドはStringオブジェクト(文字列)のメソッドの1つです。

「呼び出し元の文字列」に対して「引数で指定した文字列」を連結・結合させた文字列を返り値として返します。
引数は複数指定することができ(不定数の引数)、指定した順番に連結・結合されていきます。

注意
公式ページ で、文字列の連結・結合には代入演算子である++=の使用が推奨されています。 特別な理由がある場合を除き、代入演算子を使用してください。

// 記述例

const 連結された文字列 = 呼び出し元の文字列.concat(呼び出し元の文字列に連結させたい文字列)

TL;DR

基本

// 「呼び出し元の文字列」に「引数の文字列」を結合・連結する
const string1 = 'FooBar';
const string1_1 = 'Ninja';
const returnValue1 = string1.concat(string1_1);
console.log(returnValue1);
==> FooBarNinja

// 呼び出し元と引数の文字列には変更なし
console.log(string1);
==> FooBar
console.log(string1_1);
==> Ninja







// 引数は複数指定することができる
const string2 = 'js';
const string2_1 = 'JavaScript';
const string2_2 = 'TS';
const returnValue2 = string2.concat(string2_1, string2_2);
console.log(returnValue2);
==> jsJavaScriptTS






// 引数を指定しない場合
const string3 = 'js';
const returnValue3 = string3.concat();
console.log(returnValue3);
==> js






// 配列の要素を展開
const array4 = ['Foo', 'Bar', 'Ninja'];
const returnValue4 = ''.concat(...array4);
console.log(returnValue4);
==> FooBarNinja

引数に文字列以外を指定

// 引数には文字列ではない値も指定できる
const string1 = 'js';
const returnValue1 = string1.concat(true);
console.log(returnValue1);
==> jstrue





// 引数を複数指定する
const function2 = () => {};
const returnValue2 = ''.concat(100, ',', null, ',', function2);
console.log(returnValue2);
==> 100,null,() => {}

代入演算子の推奨

// 文字列の連結・結合には+,+=が推奨される
const string1 = 'js';
const new_string1 = string1 + 'JavaScript';
console.log(new_string1);
==> jsJavaScript





let string2 = 'js';
string2 += 'JavaScript';
console.log(string2);
==> jsJavaScript





const new_string3 = string1.concat('JavaScript');
console.log(new_string3);
==> jsJavaScript

解説

// 記述例

const 連結された文字列 = 呼び出し元の文字列.concat(呼び出し元の文字列に連結させたい文字列)

基本

Stringクラス(文字列)のconcatメソッドは「呼び出し元の文字列」に「引数で指定した文字列」を順番に連結・結合させ、新しい文字列を返り値として返します。

引数に指定する文字列は複数指定することができ(不定数の引数)、引数に指定した順番通りに連結・結合されます。

「呼び出し元の文字列」と「引数で指定した文字列」に対しては変更を実行しないので注意してください。

const string1 = 'A';
const string1_1 = 'B';
const returnValue1 = string1.concat(string1_1);
console.log(returnValue1);
==> AB

// 呼び出し元・引数の文字列は変化なし
console.log(string1);
==> A
console.log(string1_1);
==> B







// 引数を複数指定
const string2 = 'A';
const returnValue2 = string2.concat(',', 'B', ',', 'C');
console.log(returnValue2);
==> A,B,C






// 引数なし
const returnValue3 = 'A'.concat();
console.log(returnValue3);
==> A






// 配列を展開
const array4 = ['Java', 'Script'];
const returnValue4 = ''.concat(...array4);
console.log(returnValue4);
==> JavaScript

引数に文字列以外を指定

引数には文字列以外の値も指定することができます。
文字以外の値を指定した場合は、該当の値が文字列化され、その文字列を「呼び出し元の文字列」に連結・結合した文字列が返り値となります。

const string1 = 'A';
const returnValue1 = string1.concat(0);
console.log(returnValue1);
==> A0





// 引数を複数指定
const returnValue2 = ''.concat(false, null, undefined);
console.log(returnValue2);
==> falsenullundefined

代入演算子の推奨

文字列の結合・連結をする処理について、 公式ページ で代入演算子(++=)の使用が強く推奨されています。
これは代入演算子を用いて文字列の結合・連結を実行したほうが高速だからです。

concatメソッドでなければならない場面以外は代入演算子を使用してください。

const string1 = 'A';
const new_string1 = string1 + 'B';
console.log(new_string1);
==> AB





let string2 = 'A';
string2 += 'B';
console.log(string2);
==> AB





const new_string3 = string1.concat('B');
console.log(new_string3);
==> AB

1次情報

String.prototype.concat() - MDN web docs