JavaScript에서 값을 문자열(string)로 변환하는 방법은 크게 5가지가 있습니다. 각각의 방식은 상황에 따라 장단점이 있으므로, 용도에 맞는 방법을 선택하는 것이 중요합니다.
빈 문자열 연결 — 값에 빈 문자열('')을 더하는 가장 간단한 방법
템플릿 문자열 — 백틱(``)을 사용한 템플릿 리터럴 활용
JSON.stringify() — 객체나 배열을 직렬화할 때 유용한 방법
toString() — 값이 가진 기본 메서드를 호출하는 방식
String() — 전역 String 함수를 사용하는 가장 안전한 방법
예제 코드
다음 예제에서는 위에서 소개한 5가지 방법을 모두 사용하여 숫자 값을 문자열로 변환하고, 변환된 값과 함께 typeof 연산자를 통해 데이터 타입을 확인하여 출력합니다.
<html>
<body>
<script>
const value = 123;
document.write((value + '') +" "+typeof (value + ''));
document.write("</br>");
document.write((`${value}`) +" "+typeof (`${value}`));
document.write("</br>");
document.write((JSON.stringify(value)) +" "+typeof (JSON.stringify(value)));
document.write("</br>");
document.write((value.toString()) +" "+typeof (value.toString()));
document.write("</br>");
document.write((String(value)) +" "+typeof(String(value)));
</script>
</body>
</html>실행 결과
123 string 123 string 123 string 123 string 123 string
방법별 특징 정리
빈 문자열 연결(value + ''): 코드가 짧고 간편하지만, 의도를 명확히 드러내지 못해 가독성이 떨어질 수 있습니다.
템플릿 문자열(`${value}`): 다른 문자열과 조합할 때 특히 유용하며, 최신 JavaScript 문법에서 널리 사용됩니다.
JSON.stringify(): 객체나 배열을 문자열로 변환할 때 필수적이지만, undefined나 함수는 변환되지 않는다는 점에 주의해야 합니다.
toString(): 진법 변환(예: value.toString(2))도 지원하지만, null이나 undefined에서 호출하면 오류가 발생합니다.
String(): null과 undefined까지 안전하게 문자열로 변환할 수 있어 가장 견고한 방법으로 권장됩니다.
모든 방법의 결과가 동일하게 "123 string"으로 출력되는 것을 확인할 수 있습니다. 일반적인 경우에는 String() 함수나 템플릿 문자열을 사용하는 것이 안전성과 가독성 측면에서 가장 좋은 선택입니다.