JavaScript / String()으로 숫자를 문자열로 변환하기

숫자를 문자열로 바꾸려면 String(number)를 호출합니다. 예를 들어 String(1200)의 결과는 문자열 "1200"이며, 이 값은 더 이상 숫자 덧셈의 피연산자와 같은 방식으로 취급되지 않습니다. 단순 변환과 천 단위 구분·소수 자릿수 같은 표시 형식 지정은 서로 다른 작업입니다.

new 없이 호출하고 결과 자료형 확인하기

const number = 1200;
const text = String(number);

console.log(text);        // "1200"이라는 문자열
console.log(typeof text); // "string"

콘솔이나 화면에는 숫자와 문자열이 비슷하게 표시될 수 있습니다. 값의 자료형은 typeof로 확인하고, 예제처럼 문자열의 경계를 보이고 싶다면 JSON.stringify(text)로 따옴표가 있는 표현을 출력할 수 있습니다. 여기서는 이미 변환한 문자열을 보기 좋게 표시하는 용도로만 JSON 함수를 사용합니다.

String()에 new를 붙이지 않으면 기본형 문자열이 반환됩니다. new String()은 문자열을 감싼 객체를 만들므로 단순한 형 변환 목적에서는 구분해야 합니다. MDN의 String() 문서는 두 호출 방식과 Symbol 처리의 차이를 설명합니다.

값을 선택해 변환하는 전체 예제

아래 코드를 string-conversion.html에 UTF-8로 저장한 뒤 브라우저에서 여세요. 선택 상자의 값은 샘플을 고르는 식별자이고, 실제 변환 대상은 Map에 보관한 숫자·불리언 등의 값입니다. 입력란의 문자열에 다시 String()을 적용한 결과를 숫자 변환이라고 오해하지 않도록 구분한 구성입니다. Map은 키에 대응하는 값을 보관하는 자료구조입니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>String 변환 결과와 자료형</title>
</head>
<body>
<h1>값을 문자열로 바꾸기</h1>
<label for="sample">변환할 값</label>
<select id="sample">
  <option value="number">숫자 1200</option>
  <option value="zero">숫자 0</option>
  <option value="boolean">false</option>
  <option value="null">null</option>
  <option value="undefined">undefined</option>
  <option value="bigint">BigInt 42n</option>
  <option value="symbol">Symbol("id")</option>
</select>
<button id="convert" type="button">변환</button>
<pre id="output"></pre>
<script>
const values = new Map([
  ["number", 1200], ["zero", 0], ["boolean", false],
  ["null", null], ["undefined", undefined],
  ["bigint", 42n], ["symbol", Symbol("id")]
]);
const sample = document.getElementById("sample");
const output = document.getElementById("output");
function convert() {
  const value = values.get(sample.value);
  const text = String(value);
  output.textContent = [
    `원래 자료형: ${typeof value}`,
    `문자열 표현: ${JSON.stringify(text)}`,
    `변환한 자료형: ${typeof text}`
  ].join("\n");
}
document.getElementById("convert").addEventListener("click", convert);
convert();
</script>
</body>
</html>

처음에는 원래 자료형이 number, 문자열 표현이 "1200", 변환한 자료형이 string으로 표시됩니다. 샘플을 null이나 undefined로 바꿔도 결과는 빈 값이 아니라 각각 "null", "undefined"라는 문자열입니다. 숫자 0과 불리언 false도 화면에 남습니다.

Symbol 샘플은 "Symbol(id)"로 변환됩니다. Symbol을 빈 문자열과 +로 연결하거나 템플릿 문자열에 바로 넣으면 오류가 날 수 있지만, 명시적인 String(symbol) 변환은 허용됩니다. 샘플을 처음의 ‘숫자 1200’으로 돌려 비교 조건을 복원할 수 있습니다.

덧셈·문자열 연결·표시 형식을 구분하기

const a = 12;
const b = 3;

a + b;                 // 15
String(a) + String(b); // "123"
String(a + b);         // "15"

먼저 숫자를 더한 뒤 문자열로 바꿀지, 각 숫자를 문자열로 바꿔 연결할지에 따라 결과가 다릅니다. 이미 문자열로 만든 값을 계산에 다시 쓰려면 숫자 변환과 입력 검증이 필요합니다. 변환 규칙은 Number()로 문자열을 숫자로 바꾸는 방법과 함께 비교할 수 있습니다.

String(1000.00);      // "1000"
String(Number("0012")); // "12"
String(1e21);          // "1e+21"

숫자 값으로 바뀌는 과정에서 사라진 앞자리 0이나 원래 적었던 소수점 이하 0은 String()이 복원하지 못합니다. 매우 크거나 작은 수는 지수 표기로 나타날 수도 있습니다. 식별 번호처럼 원래 글자 형태를 유지해야 한다면 처음부터 문자열로 보관하세요. 사람이 읽을 표시 형식이 목적이면 Intl.NumberFormat과 천 단위 표시 예제처럼 형식 지정 기능을 검토합니다.

빈 값과 객체를 출력할 때의 선택

const value = null;
const display = String(value ?? "");
console.log(display); // 빈 문자열

const primitive = String(12);
const wrapped = new String(12);
primitive === "12"; // true
wrapped === "12";   // false

??는 왼쪽이 null 또는 undefined일 때만 대체값을 사용합니다. 따라서 빈 값을 표시하지 않되 0이나 false는 유지하려는 경우에 적합합니다. 객체를 만든 new String()은 엄격한 비교에서 기본형 문자열과 같지 않으므로, 단순 변환에 사용하지 않는 편이 좋습니다.

일반 객체를 변환하면 "[object Object]" 같은 문자열이 될 수 있습니다. 객체 구조를 저장하거나 전송할 목적이라면 단순 표시 변환과 구분해 JSON 직렬화 등 적절한 형식을 선택하세요. 또한 문자열로 바꿨다는 이유로 HTML에 안전하게 삽입할 수 있는 것은 아니므로, 텍스트 출력에는 예제처럼 textContent를 사용합니다.