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

Programming

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

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

難易度(MAX10)★★★★☆☆☆☆☆☆
こんな場合に使用

  • 別々で入力した姓と名を結合したい
  • 名前と拡張子を結合したい

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」でした。

ProgrammingJava Script,WEB

Posted by KT