jquery 変数 文字列

 

【jQuery入門】変数を文字列に埋め込む方法を解説！

jQueryで変数を文字列に埋め込む方法とは？

変数を文字列に埋め込むとは、動的に変化する値を文字列に挿入することです。jQueryを使用する上では、HTML要素のコンテンツを動的に変更する際などに頻繁に利用されるテクニックです。

文字列連結を使った埋め込み方法

`+` 演算子を使用して、変数と文字列を連結する方法です。


const name = '太郎';
$('#message').text('こんにちは、' + name + 'さん！');

シンプルなケースに最適ですが、可読性が低くなる場合があります。

テンプレートリテラルを使った埋め込み方法 (ES6以降)

バッククォート(`)で囲まれた文字列内で、`${変数名}` の形式で変数を埋め込みます。


const name = '太郎';
$('#message').text(`こんにちは、${name}さん！`);

可読性が高く、複数行の文字列も扱いやすいです。

$.fn.append() を使った動的なHTML要素の追加

`$.fn.append()` メソッドを使用して、変数を含むHTML要素を動的に追加する方法です。


const name = '太郎';
const age = 20;
$('#profile').append(`<p>名前: ${name}</p><p>年齢: ${age}</p>`);

HTML構造が複雑な場合に有効です。

まとめ

jQueryで変数を文字列に埋め込む方法は、状況に応じて使い分けます。

  • テンプレートリテラルは可読性が高く、
  • `$.fn.append()` は動的なHTML要素の追加に最適です。

それぞれの方法を理解し、効率的なjQueryコーディングを目指しましょう。

参考資料

jQuery 変数埋め込み FAQ

質問 回答
テンプレートリテラルと文字列連結、どちらを使うべき？ 基本的には可読性の高いテンプレートリテラルを推奨します。ただし、ES6以前の環境では使用できないため、その場合は文字列連結を使用します。
変数を含むHTML要素を複数追加したい場合は？ `$.fn.append()` を複数回呼び出すか、あらかじめHTML文字列を作成してから一度だけ `$.fn.append()` を使用します。
変数にHTMLタグが含まれている場合、エスケープ処理は必要？ `$.fn.text()` を使用する場合は自動的にエスケープ処理が行われますが、`$.fn.html()` や `$.fn.append()` を使用する場合は、必要に応じてエスケープ処理を行う必要があります。

その他の参考記事:jquery 変数