Обзор

generaltranslation@8.1.0 представляет formatCutoff() — функцию усечения текста с учетом локали, которая учитывает ограничения по числу символов и использует подходящие терминаторы для разных языков.

Зачем это нужно

Усечение текста в UI обычно реализуют с помощью CSS text-overflow: ellipsis или простого обрезания строки, но эти подходы не учитывают особенности, зависящие от локали. В разных языках при обрыве текста используются разные символы многоточия, пробелы и правила пунктуации.

Кроме того, когда переводы, созданные ИИ, ограничены по числу символов, часто требуется строго соблюдать эти ограничения на клиенте в качестве резервного варианта.

Использование

formatCutoff() доступна как метод экземпляра GT и как автономная функция:

import { GT, formatCutoff } from 'generaltranslation'

const gt = new GT({ targetLocale: 'en-US' })

// Базовое усечение
gt.formatCutoff('Hello, world!', { maxChars: 9 })
// Возвращает: 'Hello, w…'

// Автономная функция
formatCutoff('Hello, world!', { 
  locales: 'fr-FR', 
  maxChars: 9 
})
// Возвращает: 'Hello, w\u202F…'  // Обратите внимание на узкий пробел перед многоточием

Отрицательные значения maxChars

При отрицательных значениях строка обрезается с конца, а терминатор добавляется в начало:

gt.formatCutoff('Hello, world!', { maxChars: -4 })
// Возвращает: '…ld!'

Терминаторы для разных локалей

В разных локалях используются разные варианты многоточия:

// В китайском и японском используется двойное многоточие
formatCutoff('你好世界', { locales: 'zh-CN', maxChars: 4 })
// Возвращает: '你好……'

// Во французском используется узкий неразрывный пробел перед многоточием  
formatCutoff('Bonjour', { locales: 'fr-FR', maxChars: 6 })
// Возвращает: 'Bonj\u202F…'

Пользовательские терминаторы

Переопределите стандартное поведение с помощью пользовательских терминаторов и разделителей:

gt.formatCutoff('Long text here', {
  maxChars: 13,
  terminator: '...',
  separator: ' '
})
// Возвращает: 'Long text ...'

Без терминатора

Используйте стиль 'none', чтобы выполнить усечение без терминатора:

gt.formatCutoff('Hello, world!', {
  maxChars: 5,
  style: 'none'
})
// Возвращает: 'Hello'

Основа для UI-библиотек

Эта функциональность служит базовым слоем для UI-специфичных реализаций в gt-react и gt-next, которые предоставляют подмножества этой функциональности, соответствующие их фреймворкам.