JavaScript에서 숫자 서식 지정

Sahil Bhosale 2022년1월15일 2021년7월3일 JavaScript JavaScript Number
JavaScript에서 숫자 서식 지정

다른 국가 및 지역의 사람들이 숫자 형식을 지정하는 다양한 방법을 따릅니다. 방문자가 웹 사이트에 액세스하는 지역을 기반으로 웹 사이트에서 숫자 형식을 지정하려는 경우가있을 수 있습니다.

사용자의 위치를 ​​기반으로 수동으로이 작업을 시도하면 어려울 수 있습니다. 그러나 걱정할 필요는 없습니다. JavaScript에서 숫자 형식을 지정하는 더 좋은 방법이 있고toLocalString()메서드를 사용하기 때문에 수동으로 수행 할 필요가 없습니다. 이 메서드는 숫자의 언어 별 표현이있는 문자열을 반환합니다.

JavaScript에서 toLocaleString() 메서드를 사용하여 숫자 서식 지정

첫 번째 매개 변수는locales이고 두 번째 매개 변수는options입니다. 이 두 매개 변수는 모두 선택 사항이므로 필수가 아닙니다. 이러한 매개 변수를 전달하지 않고도 메소드를 직접 실행할 수 있습니다. 이 경우 숫자의 형식을 지정하려면 해당 매개 변수를 전달해야합니다.

먼저 이러한 각 매개 변수의 의미를 이해 한 다음 나중에 코드에서 사용하는 방법을 살펴 보겠습니다.

1. locales 매개 변수

localestoLocalString()메소드가 허용하는 첫 번째 매개 변수입니다. BCP 47 언어 태그의 문자열 또는 이러한 문자열의 배열을 나타냅니다. BCP 47 언어 태그는 인간 언어를 식별하는 코드입니다.

예를 들어,ar-SA태그는 사우디 아라비아SA지역에서 사용되는ar로 표시되는 아랍어 용임을 나타냅니다. 따라서이 문자열을 첫 번째 인수로 전달하면 숫자 형식이 아랍어로 작성됩니다.

let eArabic = (number => {
  return number.toLocaleString('ar-SA');
});

console.log(eArabic(12345));

출력:

١٢٬٣٤٥

여기서는 숫자를 매개 변수로 사용하는eArabic이라는 화살표 함수를 만들었습니다. 이제이 화살표 함수에 숫자12345를 전달합니다. 이 함수는toLocalString()메소드를 사용하여 숫자12345를 해당 아랍어 형식ar-SA로 변환하는 것을 목표로합니다.

위의 전체 코드를 직접 복사하여 붙여 넣은 다음 브라우저의 콘솔 창에서 실행하여 출력을 볼 수 있습니다.

모든 BCP 47 언어 태그에 대해 자세히 알아 보려면이 리소스를 참조하십시오.

undefined를 로케일로 전달할 수도 있습니다. 방문자의 브라우저에 설정된 기본 언어를 사용합니다. 따라서 누군가 브라우저의 언어를 독일어로 변경 한 경우 번호가 독일어 형식으로 표시됩니다.

2. options 매개 변수

options는 객체이며toLocalString()메소드가 허용하는 두 번째 매개 변수입니다. 객체이기 때문에이 매개 변수는currency,currencySign,style,unitDisplay등과 같은 다양한 속성을 사용할 수 있습니다.

위에서 살펴본 것과 동일한 예를 사용하여options매개 변수를 이해하도록 수정 해 보겠습니다. 이전에는 숫자12345를 가져 와서 아랍어 형식으로 지정했습니다. 이제 통화 기호와 함께currency스타일을 지정하여 숫자에 통화 형식을 지정하고options를 사용하여 해당 숫자 끝에 소수 자릿수를 추가해 보겠습니다.

let eArabic = (number => {
  return number.toLocaleString('ar-SA', {style: 'currency',currency: 'SAR', minimumFractionDigits: 3});
});

console.log(eArabic(12345));

출력:

١٢٬٣٤٥٫٠٠٠ ر.س

이 경우toLocaleString()메소드에 이제 객체 인options매개 변수도 추가했습니다. 현재는 3 개의 속성이 필요합니다.style속성은 숫자를 통화 형식으로 지정하고currency속성은 해당 통화가 나타내는 통화를 알려줍니다.이 경우 사우디 리얄SARminimumFractionDigits속성은 숫자 끝에 표시 할 소수 자릿수입니다.

여기에서 가치 통화로style속성을 설정하는 경우 일부 값으로currency속성도 설정해야합니다. 그렇지 않으면 유형 오류가 표시됩니다 Currency code is required with currency style.

위 프로그램의 출력에서 ​​먼저 통화 이름은 Saudi Riyalر.س.입니다. USD이면$기호가됩니다. 그런 다음 아랍어١٢٬٣٤٥로 된 숫자 자체가 있습니다. USD로 표시 되었다면12,345가됩니다. 마침내 아랍어로٫٠٠٠로 표시되고 USD는.000으로 표시되는 점 뒤에 3 개의 소수 자리가 있습니다.

// USD format
$12,345.000

여기에서는 사람들이 아라비아 언어를 이해하기 어려울 수 있으므로 사우디 아라비아 통화 형식의 출력과 쉽게 연결할 수 있도록 미국 통화 형식에 대한 출력도 제공합니다.

숫자 형식을 지정하려는 방법에 따라 코드에서 이러한 매개 변수와 개체 속성을 사용할 수 있습니다. 또한이 기사에 제공된 다양한 링크를 방문하여toLocalString()에 대해 자세히 알아보고 JavaScript에서 숫자 형식을 지정할 수 있습니다.

Sahil Bhosale avatar Sahil Bhosale avatar

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

LinkedIn

관련 문장 - JavaScript Number

  • JavaScript에서 숫자를 이진 형식으로 변환
  • JavaScript에서 숫자가 두 값 사이에 있는지 확인
  • JavaScript에서 10진수를 16진수로 변환
  • JavaScript는 숫자를 통화 문자열로 포맷
  • JavaScript에서 소수점 2 자리로 반올림