javascript 文字列を結合する
- 作成日 2020.10.29
- 更新日 2022.10.22
- javascript
- javascript
javascriptで、concatを使用して、文字列を結合するサンプルコードを記述してます。文字列同士だけでなく配列や数値とも結合することが可能です。ここでは「+」を使用した結合方法も記述してます。
環境
- OS windows11 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 106.0.5249.103
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)サンプルコード
以下は、
「実行」ボタンをクリックすると、ランダムに生成した文字列が入った配列を、フォームに入力した文字列に結合して表示する
サンプルコードとなります。
※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>文字列が結合されていることが確認できます。
-
前の記事
mkdocs serve実行時に外部からの接続とポートを指定する 2020.10.29
-
次の記事
C# CheckBoxのチェックイベントを登録する 2020.10.30