JavaScript에서 숫자를 문자열로 변환하는 방법: 예제와 함께하는 완전 가이드

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

.## 1. 소개

JavaScript는 웹 개발에서 매우 중요한 프로그래밍 언어입니다. 특히, 타입 변환은 폼 입력 검증이나 API 응답 포맷팅과 같은 다양한 상황에서 핵심적인 역할을 합니다.
이 글에서는 JavaScript에서 숫자를 문자열로 변환하는 방법을 기본 사용법부터 고급 기법까지 자세히 설명합니다.

이 글을 읽으면 초보자도 숫자를 문자열로 변환하는 방법을 이해하고 실제 개발에 효과적으로 적용할 수 있습니다.

2. JavaScript에서 숫자를 문자열로 변환하는 기본 메서드

JavaScript는 숫자를 문자열로 변환하는 여러 방법을 제공합니다. 이 섹션에서는 가장 많이 사용되는 세 가지 방법을 설명합니다.

2.1 String() 함수 사용

숫자를 문자열로 변환하는 가장 간단한 방법은 내장 String() 함수를 사용하는 것입니다.

사용 예시

let num = 123;
let str = String(num);
console.log(typeof str); // "string"

설명

• String(number) 를 간단히 작성하면 숫자 값이 문자열로 변환됩니다.
• 원본 숫자는 변경되지 않고, 새로운 문자열 값이 반환됩니다.

장점 및 고려사항

• 코드가 간단하고 가독성이 높습니다.
• 데이터 타입이 명시적으로 보장되어 오류 가능성이 줄어듭니다.
• 다만, 공백 제거나 특수 포맷 적용은 지원하지 않습니다.

2.2 toString() 메서드 사용

toString() 메서드는 JavaScript 숫자 객체에 내장된 메서드로, 보다 유연한 변환을 가능하게 합니다.

사용 예시

let num = 456;
let str = num.toString();
console.log(str); // "456"

설명

• 숫자 객체의 메서드이므로 숫자 값에 직접 호출할 수 있습니다.
• 이진수나 16진수와 같은 다양한 진법으로 변환하는 것도 지원합니다.

진법 지정 예시

let num = 255;
let binaryStr = num.toString(2); // binary
console.log(binaryStr); // "11111111"

장점 및 고려사항

• 진법(radix)을 지정하면 숫자를 문자열로 변환하면서 진법을 바꿀 수 있습니다.
• 값이 undefined 또는 null 인 경우 오류가 발생하므로 사전에 타입 검사가 필요합니다.

2.3 템플릿 리터럴 사용

현대 JavaScript에서는 템플릿 리터럴(백틱)을 사용해 숫자를 문자열로 변환하는 것이 간단하고 직관적입니다.

사용 예시

let num = 789;
let str = `${num}`;
console.log(str); // "789"

설명

• 템플릿 리터럴을 사용하면 직관적으로 문자열 변환이 가능합니다.
• 다른 문자열과 쉽게 결합할 수 있어 유연한 포맷팅이 가능합니다.

장점 및 고려사항

• 문법이 간단하고 시각적으로 이해하기 쉽습니다.
• 표현식을 포함한 복잡한 포맷팅을 지원합니다.
• 템플릿 리터럴은 ES6부터 지원되므로 구형 브라우저에서는 주의가 필요합니다.

3. 고급 주제: 특수 숫자 값 변환 및 포맷팅

이 섹션에서는 JavaScript에서 숫자를 문자열로 변환하는 고급 기술을 살펴봅니다. 특히, 소수점 값을 다루고 출력 형식을 지정하는 방법은 실제 개발에서 자주 요구됩니다.

3.1 소수점 처리 및 포맷 지정

소수점을 포함한 숫자를 문자열로 변환할 때는 표시 형식을 제어할 수 있는 메서드를 사용할 수 있습니다.

1. toFixed() 메서드 사용

toFixed() 메서드는 소수점 이하 자리수를 지정하여 문자열을 생성합니다.

사용 예시

let num = 123.456;
let str = num.toFixed(2);
console.log(str); // "123.46"

설명

• 값이 인수로 지정된 소수점 자리수만큼 반올림됩니다.
• 반환값이 문자열이므로 추가 변환이 필요하지 않습니다.

장점 및 고려사항

. 값이 예상보다 더 많이 반올림될 수 있으므로 정밀도가 중요한 경우 추가 처리가 필요할 수 있습니다.
인수를 지정하지 않으면 기본값은 소수점 이하 0자리입니다.

실용 예시: 통화 표시

let price = 1234.5;
let formattedPrice = "$" + price.toFixed(2);
console.log(formattedPrice); // "$1234.50"

2. toPrecision() 메서드 사용

toPrecision() 메서드는 전체 유효 숫자 개수를 지정하여 문자열을 생성합니다.

사용 예시

let num = 123.456;
let str = num.toPrecision(4);
console.log(str); // "123.5"

설명

• 유효 숫자 개수를 지정하면 반올림과 포맷팅이 동시에 적용됩니다.

장점 및 고려사항

• 결과가 지수 표기법으로 표시될 수 있어 고정 형식이 필요할 때는 부적합합니다.

3.2 통화 및 백분율 형식으로 변환

데이터를 표시할 때 값들을 통화나 백분율로 포맷팅해야 할 경우가 많습니다.

1. Intl.NumberFormat을 사용한 통화 포맷팅

Intl.NumberFormat 객체를 사용하면 숫자를 손쉽게 통화 형식으로 포맷팅할 수 있습니다.

사용 예시

let price = 1234567.89;
let formatted = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(price);
console.log(formatted); // "￥1,234,568"

설명

• 로케일과 통화 코드를 지정하면 숫자가 자동으로 올바르게 포맷됩니다.
• 천 단위 구분 기호가 자동으로 적용되어 수동 처리가 필요하지 않습니다.

실용 예시: USD로 포맷팅

let usdPrice = 1234.56;
let formattedUSD = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(usdPrice);
console.log(formattedUSD); // "$1,234.56"

2. 백분율 형식으로 변환

다음 예시는 숫자를 백분율로 손쉽게 포맷팅하는 방법을 보여줍니다.

사용 예시

let rate = 0.1234;
let percent = new Intl.NumberFormat('en-US', { style: 'percent', minimumFractionDigits: 2 }).format(rate);
console.log(percent); // "12.34%"

설명

• 소수값이 백분율 표기로 변환되며, 소수점 자리수를 제어할 수 있습니다.

4. 숫자와 문자열 변환 시 중요한 고려사항 및 오류 처리

JavaScript는 숫자와 문자열 간 변환을 쉽게 해 주지만, 특정 상황에서는 오류나 의도치 않은 동작이 발생할 수 있습니다. 이 섹션에서는 주요 고려사항과 오류 처리 실용 예시를 소개합니다.

4.1 NaN(숫자가 아님) 감지 및 처리

JavaScript에서 NaN(Not a Number)은 숫자 연산이나 변환이 실패할 때 발생합니다. 이를 올바르게 감지하고 처리하는 방법을 살펴보겠습니다.

1. 기본 NaN 감지

예시: NaN 생성

let result = "abc" * 2; // Invalid operation
console.log(result); // NaN

위와 같이 문자열과 숫자 간 연산은 유효하지 않아 NaN이 발생합니다.

예시: isNaN() 사용

let value = "abc" * 2;
console.log(isNaN(value)); // true

2. Number.isNaN() 사용

ES6에서는 보다 정확한 감지를 위해 Number.isNaN()이 도입되었습니다.

예시: 엄격한 감지

console.log(isNaN("123"));          // false (due to type coercion)
console.log(Number.isNaN("123"));   // false (no type coercion)

핵심 포인트

• isNaN()은 타입 강제 변환을 수행하므로 예상치 못한 결과가 나올 수 있습니다.
• Number.isNaN()은 타입 강제 변환을 하지 않아 더 신뢰할 수 있습니다.

4.2 타입 변환 오류 방지 기법

1. 안전한 타입 검사 예시

숫자와 문자열을 혼합해서 발생하는 예상치 못한 오류를 방지하려면 미리 타입 검사를 수행할 수 있습니다.

예시: 처리 전에 타입 확인

let value = "123";

if (typeof value === "number") {
  console.log(value.toString());
} else if (!isNaN(value)) {
  console.log(String(Number(value)));
} else {
  console.log("Invalid input value");
}

Explanation

• By checking the data type in advance and handling invalid values, overall safety is improved.

2. Setting Default Values

Setting default values is also an effective strategy when invalid input is provided.

Example: Applying a Default Value

function safeConvert(value) {
  return isNaN(value) ? "0" : String(value);
}

console.log(safeConvert("123")); // "123"
console.log(safeConvert("abc")); // "0"

Key Points

• By using isNaN() , processing can continue safely with a default value when errors occur.

4.3 Handling Floating-Point Precision Errors

JavaScript floating-point calculations can produce precision errors. Let’s review how to mitigate them.

1. Example of a Precision Error

let result = 0.1 + 0.2;
console.log(result); // 0.30000000000000004

2. Methods to Eliminate Precision Errors

Method 1: Using toFixed()

let result = (0.1 + 0.2).toFixed(2);
console.log(result); // "0.30"

Method 2: Using Integer Arithmetic

let result = (0.1 * 10 + 0.2 * 10) / 10;
console.log(result); // 0.3

Key Points

• Floating-point arithmetic can introduce errors, so countermeasures are necessary.
• For financial calculations or precision-critical logic, integer arithmetic is recommended.

5. FAQ: Frequently Asked Questions and Troubleshooting

When converting numbers to strings in JavaScript, developers from beginners to intermediate levels often encounter various questions and issues. This section introduces common questions and their solutions.

5.1 How can I verify that a number has been converted into a string?

Question:
I want to confirm whether a number has been successfully converted into a string. Is there a simple way to check?

Answer:
You can verify the conversion by checking the data type of the result.

Example: Using the typeof Operator

let num = 123;
let str = String(num);
console.log(typeof str); // "string"

Key Points:

• The typeof operator returns the type of a variable as a string.
• To check whether a value is a number, use typeof num === “number” .

5.2 Why do errors occur when converting numbers?

Question:
An error occurred during code execution. What could be the cause?

Answer:
Errors may occur when the value being converted is undefined or null.

Example: Handling undefined and null Safely

let value = null;

// Convert safely
let str = value !== null && value !== undefined ? String(value) : "Default value";
console.log(str); // "Default value"

Key Points:

• Checking for value existence in advance helps prevent errors.
• Setting a default value improves the stability of your code.

5.3 Why does the converted string not match the expected format?

Question:
After converting a number to a string, the number of decimal places or format is not what I expected. What should I do?

Answer:
Use toFixed() or Intl.NumberFormat to explicitly specify the format.

Example 1: Fixing Decimal Places

let num = 123.456;
let str = num.toFixed(2);
console.log(str); // "123.46"

Example 2: Adding Thousand Separators or Currency Symbols

let price = 1234567.89;
let formatted = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(price);
console.log(formatted); // "￥1,234,568"

Key Points:

• Select the appropriate method to control numeric display formats.
• International formatting should be considered when necessary.

5.4 How should I handle accidental conversion of non-numeric strings?

Question:
문자열이 실수로 숫자로 처리되어 오류가 발생했습니다. 잘못된 변환을 어떻게 방지할 수 있나요?

Answer:
입력 데이터를 미리 검증하고 변환하기 전에 숫자인지 확인하십시오.

Example: Combining Validation and Conversion

let input = "abc"; // User input

if (!isNaN(input)) {
  let str = String(Number(input));
  console.log(str);
} else {
  console.log("Invalid input value.");
}

Key Points:

• 입력 검증과 오류 처리를 결합하면 잘못된 데이터 처리를 방지할 수 있습니다.
• 사용자 입력을 다룰 때는 각별한 주의가 필요합니다.

5.5 How can I maintain floating-point precision?

Question:
0.1 + 0.2 가 0.30000000000000004 로 나오는 문제를 해결하고 싶습니다.

Answer:
부동소수점 연산은 정밀도 오류를 일으키므로, 정수 연산을 사용하거나 고정 소수점 형식으로 출력하십시오.

Example 1: Using Integer Arithmetic

let result = (0.1 * 10 + 0.2 * 10) / 10;
console.log(result); // 0.3

Example 2: Fixing Decimal Places

let result = (0.1 + 0.2).toFixed(2);
console.log(result); // "0.30"

Key Points:

• 부동소수점 계산은 오류를 발생시킬 수 있으므로 예방 조치가 필요합니다.
• 계산 데이터와 표시 데이터를 분리하면 안전성과 정확성을 높일 수 있습니다.

6. Summary and Related Resources

이 문서는 JavaScript에서 숫자를 문자열로 변환하는 방법을 기본적인 방법부터 고급 기법, 주요 고려사항, FAQ까지 포괄적으로 설명했습니다. 주요 내용을 다시 살펴보겠습니다.

6.1 Key Points Summary

1. Basic Conversion Methods

• String() Function : 간단하고 초보자에게 친숙합니다.
• toString() Method : 유연하며 진법 및 숫자 체계 변환을 지원합니다.
• Template Literals : 현대적인 문법으로 가독성이 높고 사용이 편리합니다.

2. Advanced Formatting and Display Control

• toFixed() : 소수점 자리수를 제어합니다.
• Intl.NumberFormat : 통화 및 퍼센트 형식을 간단히 처리합니다.

3. Error Handling and Best Practices

• NaN Detection : isNaN() 및 Number.isNaN()을 사용해 오류를 방지합니다.
• Safe Type Conversion : 처리 전에 데이터 유형을 검증합니다.
• Floating-Point Precision Handling : 정수 연산이나 고정 소수점 제어를 사용합니다.

4. FAQ-Based Troubleshooting

• 입력 오류 및 형식 문제에 대한 실용적인 해결책.
• 실제 코드 예제로 문제 해결 능력을 강화합니다.

6.2 Practical Use Cases

이 문서에서 소개한 기법은 다음과 같은 상황에 적용할 수 있습니다:

• E-commerce Price Displays : 통화 형식을 사용해 가독성을 높입니다.
• Data Visualization Tools : 단위나 퍼센트와 함께 숫자 값을 포맷합니다.
• Form Input Validation : 입력을 검증하고 안전하게 처리합니다.
• Logging and Debugging : 숫자 값을 문자열로 변환해 명확한 출력물을 만듭니다.

6.3 Related Links and References

더 깊이 파고들거나 공식 문서를 참고하고 싶은 분들을 위해 다음 리소스를 추천합니다:

• JavaScript String Object MDN Web Docs – String
• Detailed Guide to toFixed() and Number Formatting MDN Web Docs – Number.toFixed()
• Using Intl.NumberFormat MDN Web Docs – Intl.NumberFormat

6.4 Final Notes

JavaScript에서 숫자를 문자열로 변환하는 것은 웹 애플리케이션 전반에 걸쳐 필수적인 기술입니다.

Skills Gained from This Article:

• 기본 타입 변환 기법 이해
• 다양한 상황에 맞는 숫자 데이터 포맷팅
• 안정적이고 오류에 강한 코드 작성

이러한 기법을 활용해 실용적이고 신뢰할 수 있는 웹 애플리케이션을 구축하십시오.

추가 노트 및 미래 학습

JavaScript 실력을 더욱 향상시키기 위해, 문자열에서 숫자로의 역변환과 더 고급 데이터 타입 조작 기법을 학습하는 것을 고려해 보세요. 이러한 주제들은 미래 기사에서 다뤄질 예정입니다—기대해 주세요!