다국어 지원 및 통화 표시는 현대 웹 애플리케이션에서 중요한 기능입니다. 자바스크립트에서는 이러한 기능을 지원하기 위해 Intl API를 제공합니다. Intl API는 다국어 지원, 날짜 및 시간 형식화, 숫자 형식화, 통화 표시 등의 기능을 제공합니다. 특히, 통화 표시를 위해서는 Intl.NumberFormat 클래스를 사용할 수 있습니다.

통화 표시 기능 활용 방법

통화 표시를 위해 Intl.NumberFormat 클래스의 format() 메서드를 사용합니다. 이 메서드를 사용하면 주어진 값을 지정된 로케일에 맞게 통화 표시 형식으로 변환할 수 있습니다.

다음은 간단한 예제 코드입니다:

const price = 1000;
const currency = 'USD';

const formattedPrice = new Intl.NumberFormat('en-US', { style: 'currency', currency: currency }).format(price);
console.log(formattedPrice); // $1,000.00

위의 코드에서는 Intl.NumberFormat 객체를 생성할 때 첫 번째 매개 변수로 로케일을 지정하고, 두 번째 매개 변수에는 통화 스타일 및 통화 코드를 설정합니다. format() 메서드에 변환할 값을 전달하면 통화 표시 형식으로 변환된 값이 반환됩니다.

로케일 변경하기

Intl API는 로케일을 변경하는 다양한 옵션을 제공합니다. 로케일을 변경하기 위해 navigator.language 속성을 사용하거나, 직접 로케일을 지정할 수도 있습니다.

다음은 예제입니다:

const price = 1000;
const currency = 'EUR';

const userLocale = navigator.language;
const formattedPrice = new Intl.NumberFormat(userLocale, { style: 'currency', currency: currency }).format(price);
console.log(formattedPrice); // €1,000.00

위의 코드에서는 navigator.language를 사용하여 사용자의 로케일을 가져오고, 해당 로케일을 통해 통화 표시 형식을 설정합니다. 이를 통해 현재 사용자의 로케일에 맞게 통화 표시를 할 수 있습니다.

결론

자바스크립트의 Intl API를 활용하면 다국어 통화 표시 기능을 구현할 수 있습니다. Intl.NumberFormat 클래스를 사용하여 통화 표시 형식을 설정하고, 변환할 값을 포맷팅할 수 있습니다. 또한, 로케일을 변경하여 사용자의 언어 및 지역에 맞게 통화 표시를 할 수 있습니다.

해시태그: #자바스크립트 #다국어통화