JSで文字列を結合する方法：JavaScriptの基礎23

今回はJavaScriptで指定した文字列を結合して、結合された文字列を返す方法を紹介します。

今回紹介する方法を使用すれば入力フォームの「姓」と「名」の入力を結合してフルネームを返すことができる様になります。
入力フォームでよく使用されているので覚えておきましょう。

JSで文字列を結合する方法

JavaScriptで文字列を結合する方法は以下の様に代入演算子の「+」を使用して行います。

const firstname = '田中'
const lastname = '太郎'
console.log(firstname + lastname)

以下の様にテンプレート文字列（“）を用いても結合する事が出来ます。
*テンプレートを使用するときは「”（シングルクォート）」では無く「“（バッククォート）」なので注意。

const firstname = '田中'
const lastname = '太郎'
console.log(`${firstname}${lastname}`)

以下のサンプルは入力フォームに「姓」と「名」を入力するとフルネームにして返答するプログラムです。

<div class="namecontainer">
     <label>姓 <input id="firstname" class="text" type="text">
     </label>
     <label>名 <input id="lasttname" class="text" type="text">
     </label>
</div>
 <p id="fullname"></p>

const firstnameText = document.querySelector('#firstname');
const lasttnameText = document.querySelector('#lasttname');
const fullname = document.querySelector('#fullname');
firstnameText.addEventListener('keyup', onkeyup);
lasttnameText.addEventListener('keyup', onkeyup);
function onkeyup() {
    const firstname = firstnameText.value;
    const lasttname = lasttnameText.value;
    fullname.innerHTML = `${firstname}${lasttname}`;
}

実際に以下の様に「姓」と「名」を入力してみるとフルネームが表示されています。

以上が「JSで文字列を結合する方法：JavaScriptの基礎23」でした。

JavaScriptで文字列を取り扱う方法まとめ

この記事はJavaScriptで文字列を扱う方法をまとめた記事です。今回紹介するプロパティを覚えれば、長さの取得や検索、置換などをJavaScriptで指示する事が出来ます。

kt-life.net

2020.08.15