では「3つ以上なら『…など』を付けるリスト表現」を作ってみましょう。
カートの例
const cart = [
{ name: 'Tシャツ', price: 1500, quantity: 2 },
{ name: 'ジーンズ', price: 5000, quantity: 1 },
{ name: '帽子', price: 2000, quantity: 1 },
{ name: '靴', price: 8000, quantity: 1 }
];
やりたいこと
- 商品が1つ → そのまま表示
- 商品が2つ → 「A と B」
- 商品が3つ以上 → 「A, B など」
実装例
const names = cart
.filter(item => item.quantity > 0)
.map(item => item.name);
let list;
if (names.length === 0) {
list = '商品はありません';
} else if (names.length === 1) {
list = names[0];
} else if (names.length === 2) {
list = names.join(' と ');
} else {
list = names.slice(0, 2).join(', ') + ' など';
}
console.log(list);
// "Tシャツ, ジーンズ など"
ポイント
- slice(0, 2) で最初の2つだけ取り出す
- 3つ以上ある場合は「…など」を付けて「他にもあるよ」と表現
- 実務で「プレビュー表示」や「概要表示」によく使われる
💡 応用すると、
- 「最大3つまで表示して、それ以上は『…他X件』」
- 「英語風に ‘A, B, and others’」
といった国際化やUI向けの表現も作れます。