JavaScript Intl.Collator Guide

Intl.Collator provides locale-aware string comparison for proper sorting across languages. Here's how to use it.

Basic Usage#

// Create collator for locale
const collator = new Intl.Collator('en');

// Compare strings
console.log(collator.compare('a', 'b')); // -1 (a < b)
console.log(collator.compare('b', 'a')); // 1  (b > a)
console.log(collator.compare('a', 'a')); // 0  (equal)

// Sort array
const fruits = ['banana', 'Apple', 'cherry'];
fruits.sort(collator.compare);
console.log(fruits); // ['Apple', 'banana', 'cherry']

Locale-Specific Sorting#

// German sorting (ä sorts with a)
const germanCollator = new Intl.Collator('de');
const germanWords = ['ä', 'z', 'a'];
germanWords.sort(germanCollator.compare);
console.log(germanWords); // ['a', 'ä', 'z']

// Swedish sorting (ä sorts after z)
const swedishCollator = new Intl.Collator('sv');
const swedishWords = ['ä', 'z', 'a'];
swedishWords.sort(swedishCollator.compare);
console.log(swedishWords); // ['a', 'z', 'ä']

// Spanish sorting (ñ after n)
const spanishCollator = new Intl.Collator('es');
const spanishWords = ['nube', 'ñu', 'nada'];
spanishWords.sort(spanishCollator.compare);
console.log(spanishWords); // ['nada', 'nube', 'ñu']

Sensitivity Options#

// base: a ≠ b, a = á = A
const baseCollator = new Intl.Collator('en', { sensitivity: 'base' });
console.log(baseCollator.compare('a', 'A')); // 0
console.log(baseCollator.compare('a', 'á')); // 0
console.log(baseCollator.compare('a', 'b')); // -1

// accent: a ≠ b, a ≠ á, a = A
const accentCollator = new Intl.Collator('en', { sensitivity: 'accent' });
console.log(accentCollator.compare('a', 'A')); // 0
console.log(accentCollator.compare('a', 'á')); // -1

// case: a ≠ b, a = á, a ≠ A
const caseCollator = new Intl.Collator('en', { sensitivity: 'case' });
console.log(caseCollator.compare('a', 'A')); // -1
console.log(caseCollator.compare('a', 'á')); // 0

// variant: a ≠ b, a ≠ á, a ≠ A (default)
const variantCollator = new Intl.Collator('en', { sensitivity: 'variant' });
console.log(variantCollator.compare('a', 'A')); // -1
console.log(variantCollator.compare('a', 'á')); // -1

Case Ordering#

// Upper case first
const upperFirstCollator = new Intl.Collator('en', {
  caseFirst: 'upper',
});

const names1 = ['abc', 'ABC', 'Abc'];
names1.sort(upperFirstCollator.compare);
console.log(names1); // ['ABC', 'Abc', 'abc']

// Lower case first
const lowerFirstCollator = new Intl.Collator('en', {
  caseFirst: 'lower',
});

const names2 = ['abc', 'ABC', 'Abc'];
names2.sort(lowerFirstCollator.compare);
console.log(names2); // ['abc', 'Abc', 'ABC']

// Case-insensitive sort
const caseInsensitive = new Intl.Collator('en', {
  sensitivity: 'base',
});

const names3 = ['abc', 'ABC', 'def', 'Abc'];
names3.sort(caseInsensitive.compare);
console.log(names3); // ['abc', 'ABC', 'Abc', 'def']

Numeric Sorting#

// Without numeric option
const defaultCollator = new Intl.Collator('en');
const files1 = ['file10', 'file2', 'file1'];
files1.sort(defaultCollator.compare);
console.log(files1); // ['file1', 'file10', 'file2']

// With numeric option (natural sort)
const numericCollator = new Intl.Collator('en', { numeric: true });
const files2 = ['file10', 'file2', 'file1'];
files2.sort(numericCollator.compare);
console.log(files2); // ['file1', 'file2', 'file10']

// Version sorting
const versions = ['v1.10', 'v1.2', 'v1.1', 'v2.0'];
versions.sort(numericCollator.compare);
console.log(versions); // ['v1.1', 'v1.2', 'v1.10', 'v2.0']

Ignore Punctuation#

const punctuationCollator = new Intl.Collator('en', {
  ignorePunctuation: true,
});

console.log(punctuationCollator.compare('re-sort', 'resort')); // 0
console.log(punctuationCollator.compare("it's", 'its')); // 0

// Useful for searching
const items = ['re-sort', 'resort', 'reset'];
const searchTerm = 'resort';

const matches = items.filter(
  item => punctuationCollator.compare(item, searchTerm) === 0
);
console.log(matches); // ['re-sort', 'resort']

Sorting Objects#

// Sort array of objects by property
const users = [
  { name: 'Zoe', age: 25 },
  { name: 'alice', age: 30 },
  { name: 'Bob', age: 20 },
];

const collator = new Intl.Collator('en', { sensitivity: 'base' });

// Sort by name
users.sort((a, b) => collator.compare(a.name, b.name));
console.log(users.map(u => u.name)); // ['alice', 'Bob', 'Zoe']

// Sort by multiple fields
const products = [
  { category: 'Electronics', name: 'Phone' },
  { category: 'Books', name: 'Novel' },
  { category: 'Electronics', name: 'Laptop' },
  { category: 'Books', name: 'Comic' },
];

products.sort((a, b) => {
  const categoryCompare = collator.compare(a.category, b.category);
  if (categoryCompare !== 0) return categoryCompare;
  return collator.compare(a.name, b.name);
});

Search and Filter#

// Case-insensitive search
function createSearcher(locale) {
  const collator = new Intl.Collator(locale, {
    sensitivity: 'base',
    ignorePunctuation: true,
  });

  return {
    includes(text, search) {
      const textLower = text.toLowerCase();
      const searchLower = search.toLowerCase();

      for (let i = 0; i <= textLower.length - searchLower.length; i++) {
        const slice = textLower.slice(i, i + searchLower.length);
        if (collator.compare(slice, searchLower) === 0) {
          return true;
        }
      }
      return false;
    },

    filter(items, search, getField = (x) => x) {
      return items.filter((item) => this.includes(getField(item), search));
    },
  };
}

const searcher = createSearcher('en');
const cities = ['New York', 'Los Angeles', 'new orleans'];
const results = searcher.filter(cities, 'new');
console.log(results); // ['New York', 'new orleans']

Performance Optimization#

// Reuse collator instance
const collator = new Intl.Collator('en', { numeric: true });

// Good: reuse compare function
const compare = collator.compare;
largeArray.sort(compare);

// Bad: creating new collator each time
largeArray.sort((a, b) => new Intl.Collator('en').compare(a, b));

// For multiple locales, cache collators
const collatorCache = new Map();

function getCollator(locale, options = {}) {
  const key = `${locale}-${JSON.stringify(options)}`;

  if (!collatorCache.has(key)) {
    collatorCache.set(key, new Intl.Collator(locale, options));
  }

  return collatorCache.get(key);
}

Resolved Options#

const collator = new Intl.Collator('de', {
  sensitivity: 'base',
  numeric: true,
});

console.log(collator.resolvedOptions());
// {
//   locale: 'de',
//   usage: 'sort',
//   sensitivity: 'base',
//   ignorePunctuation: false,
//   collation: 'default',
//   numeric: true,
//   caseFirst: 'false'
// }

Practical Examples#

// Contact list sorting
function sortContacts(contacts, locale = 'en') {
  const collator = new Intl.Collator(locale, {
    sensitivity: 'base',
  });

  return [...contacts].sort((a, b) => {
    // Sort by last name, then first name
    const lastNameCompare = collator.compare(a.lastName, b.lastName);
    if (lastNameCompare !== 0) return lastNameCompare;
    return collator.compare(a.firstName, b.firstName);
  });
}

// File browser sorting
function sortFiles(files) {
  const collator = new Intl.Collator(undefined, {
    numeric: true,
    sensitivity: 'base',
  });

  return [...files].sort((a, b) => {
    // Folders first
    if (a.isFolder && !b.isFolder) return -1;
    if (!a.isFolder && b.isFolder) return 1;
    return collator.compare(a.name, b.name);
  });
}

// Autocomplete sorting
function sortSuggestions(suggestions, query) {
  const collator = new Intl.Collator(undefined, {
    sensitivity: 'base',
  });

  return [...suggestions].sort((a, b) => {
    // Exact matches first
    const aExact = collator.compare(a, query) === 0;
    const bExact = collator.compare(b, query) === 0;
    if (aExact && !bExact) return -1;
    if (!aExact && bExact) return 1;

    // Then starts-with
    const aStarts = a.toLowerCase().startsWith(query.toLowerCase());
    const bStarts = b.toLowerCase().startsWith(query.toLowerCase());
    if (aStarts && !bStarts) return -1;
    if (!aStarts && bStarts) return 1;

    // Then alphabetical
    return collator.compare(a, b);
  });
}

Best Practices#

Configuration:
✓ Choose appropriate sensitivity
✓ Enable numeric for versions/files
✓ Match locale to user preference
✓ Cache collator instances

Common Options:
✓ sensitivity: 'base' for search
✓ numeric: true for natural sort
✓ ignorePunctuation for fuzzy match
✓ caseFirst for specific ordering

Performance:
✓ Reuse collator instances
✓ Extract compare function
✓ Cache for multiple locales
✓ Avoid creating in loops

Avoid:
✗ localeCompare for large sorts
✗ Creating collators repeatedly
✗ Ignoring locale requirements
✗ Assuming ASCII ordering

Intl.Collator provides locale-aware string comparison essential for proper internationalization. Use sensitivity options to control how strictly strings are compared, numeric option for natural sorting of numbers in strings, and cache collator instances for performance. It handles locale-specific sorting rules automatically, making it far superior to simple string comparison for user-facing content.