JavaScript (jQuery) で数値を文字列に追加する方法

JavaScript (jQuery) で整数値を文字列として返される値に追加するには、いくつかの方法があります。 以下では、最も一般的な方法をいくつか紹介します。

方法 1: 文字列連結演算子を使用する

文字列連結演算子 (+) を使用して、整数値を文字列に変換してから、文字列に追加することができます。

const str = "Hello";
const num = 10;

const result = str + num; // "Hello10"

console.log(result); // "Hello10" を出力

方法 2: toString() メソッドを使用する

const str = "Hello";
const num = 10;

const result = str + num.toString(); // "Hello10"

console.log(result); // "Hello10" を出力

方法 3: jQuery の text() メソッドを使用する

jQuery の text() メソッドを使用して、要素のテキスト内容を取得してから、数値を追加することができます。

<div id="my-element">Hello</div>

const $element = $("#my-element");
const num = 10;

$element.text($element.text() + num); // "Hello10"

console.log($element.text()); // "Hello10" を出力

補足

• 上記の例では、文字列と数値を単純に追加していますが、必要に応じて、数値をフォーマットしてから追加することもできます。 例えば、数値をカンマ区切りで表示したい場合は、toLocaleString() メソッドを使用することができます。
• jQuery を使用していない場合は、document.getElementById() メソッドを使用して要素を取得することができます。

HTML

<div id="my-element">Hello</div>

JavaScript

// 方法 1: 文字列連結演算子を使用する

const str = "Hello";
const num = 10;

const result1 = str + num; // "Hello10"

console.log(result1); // "Hello10" を出力

// 方法 2: `toString()` メソッドを使用する

const result2 = str + num.toString(); // "Hello10"

console.log(result2); // "Hello10" を出力

// 方法 3: jQuery の `text()` メソッドを使用する

const $element = $("#my-element");

$element.text($element.text() + num); // "Hello10"

console.log($element.text()); // "Hello10" を出力

実行結果

Hello10
Hello10
Hello10

このサンプルコードを参考に、ご自身の環境で試してみてください。

テンプレートリテラルを使用すると、文字列と変数を簡単に結合することができます。

const str = "Hello";
const num = 10;

const result = `${str}${num}`; // "Hello10"

console.log(result); // "Hello10" を出力

Number.prototype.toLocaleString() メソッドを使用して、数値をロケールに合わせた文字列に変換してから、追加することができます。

const str = "Hello";
const num = 10000;

const result = str + num.toLocaleString(); // "Hello10,000"

console.log(result); // "Hello10,000" を出力

String.prototype.padStart() メソッドを使用して、文字列を指定した桁数まで左側に空白文字を追加してから、数値を追加することができます。

const str = "Hello";
const num = 10;

const result = str + num.toString().padStart(3, "0"); // "Hello010"

console.log(result); // "Hello010" を出力

これらの方法は、それぞれ異なる利点と欠点があります。 状況に合わせて適切な方法を選択してください。