HTML5 데이터-* 속성 타입 캐스팅 완벽 가이드: 문자열과 숫자 변환 방법

HTML5에서 도입된 데이터-* (data-*) 속성은 HTML 요소에 사용자 정의 데이터를 저장할 수 있게 해주는 강력한 기능입니다. 하지만 자바스크립트의 dataset API를 통해 이 속성에 접근하면 값이 항상 문자열(String) 형태로 반환된다는 점을 알아두어야 합니다.

데이터-* 속성은 항상 문자열로 반환됩니다

예를 들어, 다음과 같이 숫자처럼 보이는 값을 데이터 속성에 지정하더라도:

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

자바스크립트에서 읽어오면 문자열로 취급됩니다. 아래 코드로 각 앵커 요소의 data-value 속성 타입과 값을 확인해 볼 수 있습니다:

[...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"

문자열을 숫자로 타입 캐스팅하는 방법

데이터 속성 값을 숫자로 활용하려면 명시적인 타입 변환이 필요합니다. 대표적인 방법은 다음과 같습니다.

1. Number() 함수 사용

const value = Number(a.dataset.value); // 6.5 (number)

2. parseFloat() 함수 사용

const value = parseFloat(a.dataset.value); // 소수점까지 정확히 변환

3. 단항 더하기(+) 연산자 사용

const value = +a.dataset.value; // 간결한 변환 방식

실전 예제: 반복 처리 시 타입 변환 적용

[...document.querySelectorAll("a")].forEach(a => {
    const numValue = Number(a.dataset.value);
    console.log("type: %s, value: %o", typeof numValue, numValue);
});
// 결과: type: number, value: 6 / type: number, value: 6.5

정리

• 데이터-* 속성은 dataset으로 읽으면 항상 문자열입니다.
• 숫자 연산이 필요하면 Number(), parseFloat(), 또는 단항 + 연산자로 변환하세요.
• 변환 전에는 값이 유효한 숫자인지 확인하여 NaN 발생을 방지하는 것이 좋습니다.