SW/JavaScript

자바스크립트 : 숫자를 통화로 포맷하는 방법

얇은생각 2023. 6. 10. 07:30
반응형

자바스크립트 : 숫자를 통화로 포맷하는 방법

 

 

JavaScript에서 숫자를 통화 형식으로 지정하는 방법에 대해 설명합니다.

모든 국가는 자국의 통화와 다른 패턴 또는 화폐 금액을 표시하는 방법을 가지고 있습니다. 숫자를 적절하게 표현할 때, 독자들은 더 읽기 쉽고 이해하기 쉽습니다.

API 또는 외부 리소스의 데이터를 사용하는 경우 데이터는 일반 형식으로 표시됩니다. 예를 들어 스토어를 생성하는 경우 가격과 같은 데이터가 있을 수 있습니다.

JavaScript에서 숫자를 통화 형식으로 지정하는 방법에 대해 설명합니다.

const Journals = [

    {

        "id": 01,

        "name": "Software Development",

        "price": 100.80,

    },

    {

        "id": 02,

        "name": "Introduction to Programming",

        "price": 1534,

    },

        {

        "id": 04,

        "name": "Program or Be Programmed",

        "price": 17225,

    }

]

 

 

쉼표와 소수점을 올바른 위치에 추가해야 하기 때문에 통화 기호를 추가해도 문제가 해결되지 않습니다. 또한 통화에 따라 각 가격 출력의 형식을 올바르게 지정해야 합니다.

예를 들어 17225는 선택한 통화, 위치 및 유형에 따라 $17,225.00(미국 달러), $17,225.00(루페) 또는 €17,225,00(유로)입니다. JavaScript Intl을 사용할 수도 있습니다.이러한 정수를 통화로 변환하는 NumberFormat() 함수입니다.

const price = 17225;

let KenyaShilling = new Intl.NumberFormat('en-Ke',

{

    style: 'currency',

    currency: 'KSH',

});

console.log(`The formatted version of {price} is {KenyaShilling.format(price)}`);

// The formatted version of 17225 is Ksh17,225.00

 

 

 Ksh 17,225.00

 

 

Intl.NumberFormat() 생성자를 사용하여 숫자를 통화로 포맷하는 방법

Intl.NumberFormat() 을 사용하여 통화 형식 지정과 같은 언어별 숫자 형식 지정을 사용할 수 있는 형식 개체입니다. 이 생성자는 로케일과 옵션의 두 가지 중요한 요소를 고려합니다. 둘 다 선택 사항입니다. 

new Intl.NumberFormat(locales, options) // we can also use Intl.NumberFormat(locales, options)

 

 

억하세요.NumberFormat() "new"와 함께 또는 없이 사용할 수 있습니다 둘 다 새로운 Intl을 만들 것입니다.번호 형식 인스턴스입니다.

 

Intl에 로케일 또는 옵션이 제공되지 않는 경우.NumberFormat() 생성자는 쉼표를 추가하여 정수를 간단히 포맷합니다.

const price = 172250; console.log(new Intl.NumberFormat('en-US').format(price)); // 172,250 console.log(new Intl.NumberFormat('en-IN').format(price)); // 1,72,250 console.log(new Intl.NumberFormat('en-DE').format(price)); // 172.250

 

 

 17,225

  

 

위에서 언급한 것처럼 표준 번호 형식을 찾고 있지 않습니다. 대신 이러한 숫자를 통화로 구성하여 통화 기호를 수동으로 작성하지 않고 적절한 형식으로 반환하도록 할 수 있습니다.

이제 두 매개 변수를 살펴보고 탐색할 수 있습니다.

 

 

첫 번째 주장: 로케일

local 인수는 지정할 수 있는 선택적 문자열 매개 변수입니다. 그것은 특정한 지리적, 정치적 또는 문화적 영역을 나타냅니다. 위치에 따라 번호만 준비하고 통화 형식은 포함하지 않습니다.

const price = 172250; console.log(new Intl.NumberFormat('en-US').format(price)); // 172,250 console.log(new Intl.NumberFormat('en-IN').format(price)); // 1,72,250 console.log(new Intl.NumberFormat('en-DE').format(price)); // 172.250

 

 

번호와 가격이 사용자의 위치에 따라 지역별로 지정되었음을 알 수 있습니다. 이제 옵션 매개 변수를 보고 통화를 나타내기 위해 숫자를 변경하는 방법을 알아보겠습니다.

 

 

두 번째 주장: 옵션(스타일, 통화 등)

이 매개 변수는 주 매개 변수이며 통화 형식 지정과 같은 추가 형식을 적용할 수 있습니다. 이 개체는 다음과 같은 추가 인수가 있는 JavaScript 개체입니다:

스타일: 원하는 형식을 지정합니다. 여기에는 소수, 통화 및 단위와 같은 값이 포함됩니다.

통화;는 추가 선택사항입니다. 이 옵션을 사용하여 USD, CAD, GBP, INR 등과 같이 포맷할 통화를 지정할 수 있습니다.

// format number to US dollar

let USDollar = new Intl.NumberFormat('en-US', {

    style: 'currency',

    currency: 'USD',

});

// format number to British pounds

let Pounds = Intl.NumberFormat('en-GB', {

    style: 'currency',

    currency: 'GBP',

});

// format number to Indian rupee

let Rupee = new Intl.NumberFormat('en-IN', {

    style: 'currency',

    currency: 'INR',

});

// format number to Euro

let Euro = Intl.NumberFormat('en-DE', {

    style: 'currency',

    currency: 'EUR',

});

 

console.log('Dollars: ' + USDollar.format(price));

// Dollars: $172,250.00

console.log(`Pounds: ${pounds.format(price)}`);

// Pounds: £172,250.00

console.log('Rupees: ' + rupee.format(price));

// Rupees: ₹1,72,250.00 

console.log(`Euro: ${euro.format(price)}`);

// Euro: €172,250.00

 

 

세 번째 주장: 최대 유효 자릿수

MaximumSignificantDigits도 옵션입니다. 이를 통해 선택한 유의한 수치의 수에 따라 가격 변수를 반올림할 수 있습니다.

예를 들어 값을 3으로 변경하면 172,250.00 172,000이 됩니다.

let  euro= Intl.NumberFormat('en-'Euro, {

    style: 'currency',

    currency: 'EUR',

    maximumSignificantDigits: 3,

});

console.log(`Euro: ${euro.format(price)}`);

// Euro: £172,000

 

 

이 문서의 범위는 JavaScript를 사용하여 임의의 숫자를 통화 형식으로 변환하는 방법에 대한 기본 사항입니다.

반응형