JavaScript에서 숫자 서식 지정

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

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

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

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

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

1. locales 매개 변수

locales는toLocalString()메소드가 허용하는 첫 번째 매개 변수입니다. 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속성은 해당 통화가 나타내는 통화를 알려줍니다.이 경우 사우디 리얄SAR및minimumFractionDigits속성은 숫자 끝에 표시 할 소수 자릿수입니다.

여기에서 가치 통화로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에서 숫자 형식을 지정할 수 있습니다.