JavaScript에서 A, B, C와 같은 목록을 어떻게 형식화하나요?

소개

사용자에게 항목 목록을 표시할 때는 쉼표와 "and"와 같은 접속사로 연결해야 합니다. 언어마다 목록 형식화에 대한 규칙이 다릅니다. 영어는 쉼표와 "and"를 사용하고, 스페인어는 "y"를 사용하며, 프랑스어는 "et"를 사용하고, 중국어는 완전히 다른 구두점을 사용합니다.

Intl.ListFormat API는 배열을 올바른 구분 기호와 접속사를 사용하여 로케일에 적합한 문자열로 형식화합니다. 이는 목록 형식의 문화적 차이를 자동으로 처리합니다.

수동 목록 형식화의 문제점

join() 메서드를 사용하여 배열 요소를 쉼표로 결합할 수 있습니다.

const fruits = ["apples", "oranges", "bananas"];
const list = fruits.join(", ");
console.log(list);
// "apples, oranges, bananas"

이 접근 방식에는 두 가지 문제가 있습니다. 첫째, 마지막 항목 앞에 접속사를 추가하지 않습니다. 둘째, 다른 언어에서는 작동하지 않는 영어 구두점을 사용합니다.

마지막 항목 앞에 "and"를 수동으로 추가할 수 있습니다.

const fruits = ["apples", "oranges", "bananas"];
const lastFruit = fruits[fruits.length - 1];
const otherFruits = fruits.slice(0, -1);
const list = otherFruits.join(", ") + ", and " + lastFruit;
console.log(list);
// "apples, oranges, and bananas"

이 코드는 영어에서만 작동합니다. 스페인어 사용자는 "apples, oranges y bananas" 대신 "apples, oranges, and bananas"를 보게 됩니다. 프랑스어 사용자는 "et" 대신 "and"를 보게 됩니다. 구두점과 접속사 규칙은 언어마다 다릅니다.

Intl.ListFormat을 사용하여 목록 형식화하기

Intl.ListFormat 생성자는 배열을 로케일에 적합한 목록 문자열로 변환하는 포매터를 생성합니다.

const formatter = new Intl.ListFormat("en");
const fruits = ["apples", "oranges", "bananas"];
console.log(formatter.format(fruits));
// "apples, oranges, and bananas"

포매터는 지정된 로케일에 맞는 올바른 구분 기호와 접속사를 사용합니다. 생성자의 첫 번째 인수로 로케일을 전달합니다.

const enFormatter = new Intl.ListFormat("en");
const esFormatter = new Intl.ListFormat("es");
const frFormatter = new Intl.ListFormat("fr");

const fruits = ["apples", "oranges", "bananas"];

console.log(enFormatter.format(fruits));
// "apples, oranges, and bananas"

console.log(esFormatter.format(fruits));
// "apples, oranges y bananas"

console.log(frFormatter.format(fruits));
// "apples, oranges et bananas"

포매터는 각 로케일에 대한 구두점과 접속사 규칙을 자동으로 적용합니다.

"and"를 사용하여 목록 형식화하기

Intl.ListFormat의 기본 동작은 "and" 또는 다른 언어의 동등한 표현을 사용합니다. 이를 접속사 형식이라고 합니다.

const formatter = new Intl.ListFormat("en", { type: "conjunction" });
const items = ["bread", "milk", "eggs"];
console.log(formatter.format(items));
// "bread, milk, and eggs"

type 옵션은 항목 사이에 표시되는 연결자를 제어합니다. "conjunction" 값은 "and"를 사용하는 목록을 생성합니다. 이것이 기본값이므로 생략할 수 있습니다.

목록 유형 옵션 이해하기

type 옵션은 항목 연결 방식을 제어하는 세 가지 값을 허용합니다.

"conjunction" 타입은 "and" 또는 동등한 표현을 사용합니다.

const formatter = new Intl.ListFormat("en", { type: "conjunction" });
console.log(formatter.format(["red", "green", "blue"]));
// "red, green, and blue"

"disjunction" 타입은 "or" 또는 동등한 표현을 사용합니다.

const formatter = new Intl.ListFormat("en", { type: "disjunction" });
console.log(formatter.format(["red", "green", "blue"]));
// "red, green, or blue"

"unit" 타입은 접속사 없이 측정값이나 수량의 목록을 형식화합니다.

const formatter = new Intl.ListFormat("en", { type: "unit" });
console.log(formatter.format(["5 pounds", "12 ounces"]));
// "5 pounds, 12 ounces"

unit 유형은 기술 데이터나 측정 데이터에 적합한 최소한의 구두점을 사용합니다.

스타일 옵션 이해하기

style 옵션은 형식화된 출력의 길이와 격식을 제어합니다. 세 가지 값을 허용합니다.

"long" 스타일은 전체 단어와 표준 구두점을 사용합니다. 이것이 기본값입니다.

const formatter = new Intl.ListFormat("en", { style: "long" });
console.log(formatter.format(["Alice", "Bob", "Carol"]));
// "Alice, Bob, and Carol"

"short" 스타일은 가능한 경우 축약된 형식을 사용합니다.

const formatter = new Intl.ListFormat("en", { style: "short" });
console.log(formatter.format(["Alice", "Bob", "Carol"]));
// "Alice, Bob, & Carol"

"narrow" 스타일은 가능한 가장 간결한 형식을 사용합니다.

const formatter = new Intl.ListFormat("en", { style: "narrow" });
console.log(formatter.format(["Alice", "Bob", "Carol"]));
// "Alice, Bob, Carol"

narrow 스타일은 종종 접속사를 완전히 생략합니다. 정확한 출력은 로케일에 따라 다릅니다.

로케일별 목록 형식화 방식

각 로케일은 목록 형식화에 대한 고유한 규칙을 가지고 있습니다. 포매터는 이러한 규칙을 자동으로 적용합니다.

영어는 쉼표를 사용하며 "and" 앞에 옥스퍼드 쉼표를 포함합니다.

const formatter = new Intl.ListFormat("en");
console.log(formatter.format(["coffee", "tea", "juice"]));
// "coffee, tea, and juice"

스페인어는 쉼표와 접속사 "y"를 사용합니다.

const formatter = new Intl.ListFormat("es");
console.log(formatter.format(["café", "té", "jugo"]));
// "café, té y jugo"

프랑스어는 쉼표와 접속사 "et"를 사용합니다.

const formatter = new Intl.ListFormat("fr");
console.log(formatter.format(["café", "thé", "jus"]));
// "café, thé et jus"

중국어는 "and"를 나타내는 문자 和와 구분 기호로 열거 쉼표 、를 사용합니다.

const formatter = new Intl.ListFormat("zh");
console.log(formatter.format(["咖啡", "茶", "可乐"]));
// "咖啡、茶和可乐"

독일어는 쉼표와 접속사 "und"를 사용합니다.

const formatter = new Intl.ListFormat("de");
console.log(formatter.format(["Kaffee", "Tee", "Saft"]));
// "Kaffee, Tee und Saft"

포매터는 각 언어의 규칙을 알 필요 없이 이러한 차이를 처리합니다.

formatToParts로 개별 부분 가져오기

formatToParts() 메서드는 포맷된 목록의 각 부분을 나타내는 객체 배열을 반환합니다. 이는 서로 다른 부분에 개별적으로 스타일을 적용해야 할 때 유용합니다.

const formatter = new Intl.ListFormat("en");
const parts = formatter.formatToParts(["red", "green", "blue"]);
console.log(parts);

출력은 type 및 value 속성을 가진 객체 배열입니다.

[
  { type: "element", value: "red" },
  { type: "literal", value: ", " },
  { type: "element", value: "green" },
  { type: "literal", value: ", and " },
  { type: "element", value: "blue" }
]

각 목록 항목은 "element" 타입을 가집니다. 구분자와 접속사는 "literal" 타입을 가집니다. 이를 사용하여 커스텀 스타일을 적용할 수 있습니다.

const formatter = new Intl.ListFormat("en");
const parts = formatter.formatToParts(["red", "green", "blue"]);

const html = parts
  .map((part) => {
    if (part.type === "element") {
      return `<strong>${part.value}</strong>`;
    }
    return part.value;
  })
  .join("");

console.log(html);
// "<strong>red</strong>, <strong>green</strong>, and <strong>blue</strong>"

이 접근 방식은 로케일에 적합한 구분 기호와 접속사를 유지하면서 형식에 대한 정밀한 제어를 제공합니다.

브라우저 지원

Intl.ListFormat API는 모든 최신 브라우저에서 사용할 수 있습니다. Chrome, Firefox, Safari, Edge를 포함한 주요 브라우저에서 2021년 4월부터 지원되었습니다.

API를 사용하기 전에 사용 가능 여부를 확인할 수 있습니다.

if (typeof Intl.ListFormat !== "undefined") {
  const formatter = new Intl.ListFormat("en");
  console.log(formatter.format(["a", "b", "c"]));
} else {
  console.log("Intl.ListFormat is not supported");
}

구형 브라우저의 경우 폴백을 제공하거나 폴리필을 사용해야 합니다. 폴백은 간단한 join() 메서드를 사용할 수 있습니다.

function formatList(items, locale) {
  if (typeof Intl.ListFormat !== "undefined") {
    const formatter = new Intl.ListFormat(locale);
    return formatter.format(items);
  }
  return items.join(", ");
}

console.log(formatList(["red", "green", "blue"], "en"));
// "red, green, and blue" (or "red, green, blue" in older browsers)

이를 통해 Intl.ListFormat 지원이 없는 브라우저에서도 코드가 작동하도록 보장합니다.