Блог хеллоуворлдщика

Plural или множественное число в JS


Очень полезная и важная функция при разработке какого-либо приложения, это - наличие возможности использовать множественные формы по склонениям в зависимости от какого-либо параметра. Можно использовать i18next, но не всегда это нужно. Выход очень простой: написать хелпер для нужного языка по уже известным формам склонения слова ссылка 1 и ссылка 2.

Для русского языка эта форма будет иметь вид:

nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2)

Её я взял из первой ссылки. Читается она очень просто: nplurals - количество возможных склонений числа для языка; plural - индекс искомого склонения от 0 до nplurals - 1; n - переменная по которой будет определяться склонение.

Перепишем форму в программный и более читабельный вид:

// helpers/message.js
 
/**
 * @param {Array<String>} forms
 * @param {Number} n
 * @returns {String}
 */
export function plural(forms, n) {
    let idx;
    // @see http://docs.translatehouse.org/projects/localization-guide/en/latest/l10n/pluralforms.html
    if (n % 10 === 1 && n % 100 !== 11) {
        idx = 0; // many
    } else if (n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20)) {
        idx = 1; // few
    } else {
        idx = 2; // one
    }
    return forms[idx] || '';
}

Для удобства я подписал, что индекс "0" - это "много", индекс "1" - "несколько/пара", индекс "2" - "один". Все это я взял из второй ссылки.

Теперь, мы можем воспользоваться где угодно данной функцией:

import {plural} from './helpers/message';
 
const str1 = 'П';
console.log(str1.length + ' ' + plural(['символ', 'символа', 'cимволов'], str1.length)); // 1 символ
 
const str2 = 'Прив';
console.log(str2.length + ' ' + plural(['символ', 'символа', 'cимволов'], str2.length)); // 4 символа
 
const str3 = 'Привет';
console.log(str3.length + ' ' + plural(['символ', 'символа', 'cимволов'], str3.length)); // 6 символов
share via vkontakte share via facebook share via mailru share via odnoklassniki share via twitter

Комментарии [0]

Нет комментариев.