javascript 文字列を結合する

作成日 2020.10.29
更新日 2022.10.22
javascript
javascript

javascriptで、concatを使用して、文字列を結合するサンプルコードを記述してます。文字列同士だけでなく配列や数値とも結合することが可能です。ここでは「+」を使用した結合方法も記述してます。

1. 環境
2. concat使い方
3. 演算子「+」
4. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 106.0.5249.103

Javascript サンプル集はこちら

concat使い方

「concat」を使用すると、文字列を結合することが可能です。

文字列.concat(文字列 [, 文字列, 文字列, ...])

concatの使用例

const name = 'me'

console.log(
  name.concat('bee') // mebee
);

console.log(
  name.concat('b', 'ee') // mebee
);

console.log(
  name // me 元の値は変わりません
);

数値や配列にも使用できて、結合することができます。

const name = 'me'

console.log(
  name.concat(123,456) // me123456
);

console.log(
  name.concat(['bee']) // mebee
);

console.log(
  name.concat(['b','ee']) // meb,ee
);

逆に、配列に対して文字列を結合することもできます。

const arr = ['aaa','bbb']

console.log(
    arr.concat('ccc') 
    // ['aaa', 'bbb', 'ccc']
);

console.log(
    arr.concat('ccc','ddd') 
    // ['aaa', 'bbb', 'ccc', 'ddd']
);

// 配列同士にも使用できます
console.log(
    arr.concat(['ccc','ddd']) 
    // ['aaa', 'bbb', 'ccc', 'ddd']
);

// ちなみに配列同士の場合はスプレッド構文も使用できます
console.log(
    [...arr,...['ccc','ddd']] 
    // ['aaa', 'bbb', 'ccc', 'ddd']
);

スプレッド構文の使い方

ただし、数値に文字列は結合できずにエラーとなります。

const num = 123

console.log(
    num.concat('456') 
    // Uncaught TypeError: num.concat is not a function
);

console.log(
    num.concat(456) 
    // Uncaught TypeError: num.concat is not a function
);

演算子「+」

演算子「+」を使用しても、文字列の結合は可能です。

const name = 'me'

console.log(
  name + 'b' + 'ee'
);

数値や配列とも「+」演算子で結合できます。

const name = 'me'

console.log(
  name + 123 // me123
);

console.log(
  name + ['bee'] // mebee
);

パフォーマンスは、あまり変わりませんが「firefox」の場合は「+」の方がパフォーマンスはいいです。

<chrome>
実行回数:1000000回 関数名:+        実行時間:1.50(ms)
実行回数:1000000回 関数名:concat   実行時間:2.00(ms)

<firefox>
実行回数:1000000回 関数名:+        実行時間:3.00(ms)
実行回数:1000000回 関数名:concat   実行時間:34.0(ms)

文字列結合時で「+」と「concat」とのパフォーマンスを計測する

サンプルコード

以下は、
「実行」ボタンをクリックすると、ランダムに生成した文字列が入った配列を、フォームに入力した文字列に結合して表示する
サンプルコードとなります。

※cssには「bootstrap5」を使用してます。「bootstrap5」は、IEのサポートを終了してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
</head>

<style>
  .main {
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 30px;
  }
</style>
<script>

  function hoge() {

    // ランダムな文字列を生成
    let str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    const arr = Array(5).fill().map(x => str[~~(Math.random() * str.length)]);

    // フォームの値を取得
    const val = txt.value;
    // ランダムな文字列の配列を結合して表示
    result.innerHTML = val.concat(...arr);

  }
  
  window.onload = () => {
    // クリックイベントを登録
    btn.onclick = () => { hoge(); }; // document.getElementById('btn');を省略
  }

</script>

<body>
  <div class="main container">

    <h2><span id="result" class="badge bg-info">結果</span></h2>
    
    <div class="mb-3">
      <input id="txt" type="text" class="form-control">
    </div>

    <div class="row">
      <button id="btn" type="button" class="btn btn-warning">
        実行
      </button>
    </div>

  </div>

</body>

</html>

文字列が結合されていることが確認できます。