표준 내장 객체 Intl

표준 내장 객체 (Standard Built-in Object)

: 전역 범위의 여러 객체. 전역범위는 전역객체와 전역객체가 상속한 속성으로 이루어짐.자바스크립트가 기본적으로 가지고 있는 객체들을 의미

 

전역 객체는 아님.(전역 객체는 strict mode가 아닌경우 전역범위에서의 this, strict mode인 경우에는 globalThis로 접근가능한 객체)

 

전역범위의 나머지객체는 사용자 스크립트가 생성하거나 호스트 응용 프로그램이 제공한다. 

 

Intl 객체

: 각 언어에 맞는 문자비교, 숫자, 날짜비교를 제공하는 ECMAScript 국제화 API를 위한 namespace이다. 

 Collator, NumberFormat, DateTimeFormat는 Intl 객체의 속성을 위한 생성자이다. 

 

Constructor properties

• Intl.Collator( ) : 콜레이터 생성자. 콜레이터 객체는 각언어에 맞는 문자열 비교를 가능하게 함. 
  

  console.log(['Z', 'a', 'z', 'ä'].sort(new Intl.Collator('de').compare));
  // expected output: ["a", "ä", "z", "Z"]
  
  console.log(['Z', 'a', 'z', 'ä'].sort(new Intl.Collator('sv').compare));
  // expected output: ["a", "z", "Z", "ä"]
  
  console.log(['Z', 'a', 'z', 'ä'].sort(new Intl.Collator('de', { caseFirst: 'upper' } ).compare));
  // expected output: ["a", "ä", "Z", "z"]
  
  console.log(new Intl.Collator().compare('a', 'c')); // → a negative value
  console.log(new Intl.Collator().compare('c', 'a')); // → a positive value
  console.log(new Intl.Collator().compare('a', 'a')); // → 0​

• Intl.DateTimeFormat( ) : 각 언어에 맞는 시간과 날짜 서식을 적용할 수 있는 객체의 생성자. 
  

  let date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
  
  // toLocaleString without arguments depends on the implementation,
  // the default locale, and the default time zone
  
  // Specify default date formatting for language (locale)
  console.log(new Intl.DateTimeFormat('en-US').format(date));
  // expected output: "12/20/2020"
  
  // Specify default date formatting for language with a fallback language (in this case Indonesian)
  console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date));
  // expected output: "20/12/2020"
  
  // Specify date and time format using "style" options (i.e. full, long, medium, short)
  console.log(new Intl.DateTimeFormat('en-GB', { dateStyle: 'full', timeStyle: 'long' }).format(date));
  // Expected output "Sunday, 20 December 2020 at 14:23:16 GMT+11"
  
  //Using timeStyle and dateStyle
  let o = new Intl.DateTimeFormat("en" , {
    timeStyle: "short"
  });
  console.log(o.format(Date.now())); // "13:31 AM"
  
  let o = new Intl.DateTimeFormat("en" , {
    dateStyle: "short"
  });
  console.log(o.format(Date.now())); // "07/07/20"
  
  let o = new Intl.DateTimeFormat("en" , {
    timeStyle: "medium",
    dateStyle: "short"
  });
  console.log(o.format(Date.now())); // "07/07/20, 13:31:55 AM"​

• Intl.DisplyNames( ) : 언어, 지역 및 스크립트 표시 이름을 일관되게 변환할 수 있는 객체의 생성자
  

  const regionNamesInEnglish = new Intl.DisplayNames(['en'], { type: 'region' });
  const regionNamesInTraditionalChinese = new Intl.DisplayNames(['zh-Hant'], { type: 'region' });
  
  console.log(regionNamesInEnglish.of('US'));
  // expected output: "United States"
  
  console.log(regionNamesInTraditionalChinese.of('US'));
  // expected output: "美國"​

• Intl.ListFormat( ) : 각 언어에 맞는 목록 서식을 적용할 수 있는 객체의 생성자
  

  const list = ['Motorcycle', 'Bus', 'Car'];
  
   console.log(new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).format(list));
  // > Motorcycle, Bus and Car
  
   console.log(new Intl.ListFormat('en-GB', { style: 'short', type: 'disjunction' }).format(list));
  // > Motorcycle, Bus or Car
  
   console.log(new Intl.ListFormat('en-GB', { style: 'narrow', type: 'unit' }).format(list));
  // > Motorcycle Bus Car​

• Intl.Locale( ) :유니코드 로케일 식별자를 나타내는 객체의 생성자
  

  const korean = new Intl.Locale('ko', {
    script: 'Kore', region: 'KR', hourCycle: 'h24', calendar: 'gregory'
  });
  
  const japanese = new Intl.Locale('ja-Jpan-JP-u-ca-japanese-hc-h12');
  
  console.log(korean.baseName, japanese.baseName);
  // expected output: "ko-Kore-KR" "ja-Jpan-JP"
  
  console.log(korean.hourCycle, japanese.hourCycle);
  // expected output: "h24" "h12"

• Intl.NumberFormat( ) : 각 언어에 맞는 숫자 서식을 적용할 수 있는 객체의 생성자
  

  const number = 123456.789;
  
  console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
  // expected output: "123.456,79 €"
  
  // the Japanese yen doesn't use a minor unit
  console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
  // expected output: "￥123,457"
  
  // limit to three significant digits
  console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));
  // expected output: "1,23,000"​

• Intl.PluralRules( ) : 각언어에 맞는 복수형 규칙 및 단수 복수 구분 서식을 적용할 수 있는 객체의 생성자
  

  let pr = new Intl.PluralRules('en-US', { type: 'ordinal' });
  
  const suffixes = new Map([
    ['one',   'st'],
    ['two',   'nd'],
    ['few',   'rd'],
    ['other', 'th'],
  ]);
  const formatOrdinals = (n) => {
    const rule = pr.select(n);
    const suffix = suffixes.get(rule);
    return `${n}${suffix}`;
  };
  
  formatOrdinals(0);   // '0th'
  formatOrdinals(1);   // '1st'
  formatOrdinals(2);   // '2nd'
  formatOrdinals(3);   // '3rd'
  formatOrdinals(4);   // '4th'
  formatOrdinals(11);  // '11th'
  formatOrdinals(21);  // '21st'
  formatOrdinals(42);  // '42nd'
  formatOrdinals(103); // '103rd'​

• Intl.RelativeTimeFormat( ) : 각 언어에 맞는 상대 시간 서식을 적용할 수 있는 객체의 생성자
  

  // Create a relative time formatter in your locale
  // with default values explicitly passed in.
  const rtf = new Intl.RelativeTimeFormat("en", {
      localeMatcher: "best fit", // other values: "lookup"
      numeric: "always", // other values: "auto"
      style: "long", // other values: "short" or "narrow"
  });
  
  // Format relative time using negative value (-1).
  rtf.format(-1, "day");
  // > "1 day ago"
  
  // Format relative time using positive  value (1).
  rtf.format(1, "day");
  // > "in 1 day"
  
  // Create a relative time formatter in your locale
  // with numeric: "auto" option value passed in.
  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
  
  // Format relative time using negative value (-1).
  rtf.format(-1, "day");
  // > "yesterday"
  
  // Format relative time using positive day unit (1).
  rtf.format(1, "day");
  // > "tomorrow"​

---

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl