HTML5のdata-*属性の型キャスト解説：文字列と数値の扱い方

data-*属性は常に文字列として返される

HTML5のカスタムdata-*属性に格納した値は、数値に見えていても、JavaScriptのdatasetインターフェース経由で取得すると必ず文字列型（string）になります。これはHTMLの仕様上、すべての属性値が文字列として保存されるためです。

属性値の型を確認するコード例

たとえば、次のようなdata-*属性が定義されているとします。

<a data-value="6.0">6.0</a>
<a data-value="6.5">6.5</a>

これらの値の型を確認するには、querySelectorAllで要素を取得し、typeof演算子でチェックします。

[...document.querySelectorAll("a")].forEach(a =>
  console.log("type: %s, value: %o", typeof a.dataset.value, a.dataset.value)
);

実行結果は次のようになり、どちらの値も文字列型として扱われていることが分かります。

type: string, value: '6.0'
type: string, value: '6.5'

文字列を数値に変換（キャスト）する方法

取得した値を数値として計算に使いたい場合は、明示的に型変換を行う必要があります。代表的な方法は以下の3つです。

1. Number()を使う

const num = Number(a.dataset.value); // 6 や 6.5 という数値になる

2. parseFloat()を使う

const num = parseFloat(a.dataset.value); // 小数を含む値も安全に変換できる

3. 単項プラス（+）演算子を使う

const num = +a.dataset.value; // 簡潔に記述できる

注意点

Number("6.0")の実行結果は6となり、小数点以下の「.0」は失われます。表示形式まで正確に保持したい場合は、値を文字列のまま管理し、計算を行うタイミングでのみ数値へ変換するのが安全です。

また、数値に変換できない文字列をNumber()に渡すとNaNが返されるため、isNaN()などで事前にバリデーションを行うことで、予期しないエラーを防ぐことができます。