プログラミングを勉強し始めた時に数字の足し算は習いますが、「文字の足し算」「文字の合体」みたいなことの方は意外と知らなかったりします。
「四則演算の足し算しか方法を知らない」
「文字と変数、記号など色んなもの同士を合体させる方法を知りたい」
「””と“の違いがよく分かっていない」
本日はそんな方に向けた内容になります。
また動画もあるので必要に応じて使ってください。
JavaScriptで一番簡単に文字を結合する方法
一番簡単なやり方は四則演算の足し算を使えば良いです。
足し算は数字だけでなく文字にも使えるんですよね。
const text1 = "おはよう";
const text2 = "ございます";
console.log(text1 + text2); //"おはようございます"と出力されるちなみに足し算は文字だけでなくスペースや記号にも使えます。
const text1 = "おはよう";
const text2 = "ございます";
const space = " "
console.log(text1 + space + text2); //"おはよう ございます"と出力されるさらに変数と文字列の結合もできます。
const text1 = "おはよう";
console.log(text1 + "ございます"); //"おはようございます"と出力されるテンプレートリテラルの使い方
意外と簡単に文字の結合ができることが分かりました。
JavaScriptには文字の結合にもっと便利な機能があるので紹介します。
恐らく実務ではこちらの方が登場頻度は多いかと思います。
const text1 = "おはよう";
const text2 = "ございます";
console.log(`${text1}${text2}`); //"おはようございます"と出力される出力結果は同じなのですが、何だか見慣れない記号が出てきましたね。
まず「“」はテンプレートリテラルと呼ばれています、「”」「””」ではないので注意してください。
キーボードのシフトキーを押しながら「@」のキーを押すと入力できます。
また「${ }」は変数を扱うための記号で、「${ }」のなかで変数を記載することで変数の値を出力することができます。
先ほどの足し算と違って、「+」など間に挟む記号が無くなったので便利ですよね。
JavaScriptで文字を結合する例
最後に簡単な例題で使い方を見てみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<label for=""><input type="text" class="text" id="family"></label>
<label for=""><input type="text" class="text" id="first"></label>
</div>
<p>お名前：<span id="full"></span>様</p>
</body>
</html>
簡単な入力欄を作成しています。
入力欄それぞれに「性」「名」を入力するとフルネームを表示するようにしたいと思います。
const familyName = document.querySelector("#family");
const firstName = document.querySelector("#first");
const fullName = document.querySelector("#full");
firstName.addEventListener("keyup", keyup);
familyName.addEventListener("keyup", keyup);
function keyup(){
const familyNameValue = familyName.value;
const firstNameValue = firstName.value;
fullName.innerHTML = `${familyNameValue} ${firstNameValue}`;
}2つの入力欄の値をそれぞれ取得してテンプレートリテラルで結合しています。
「性」と「名」の間にスペースも付けていますね、テンプレートリテラルの方が足し算よりも分かりやすく書くことができました。
動作も問題ないですね、文字の結合はとても頻度の多いプログラムなので積極的に使っていきましょう。