Умное обрезание строк в JavaScript: библиотеки и техники

Быстрый ответ

Если перед вами стоит задача аккуратного обрезания строк с добавлением многоточия, можно использовать следующий метод:

const truncate = (s, n) => s.length > n ? s.slice(0, n – 1) + '…' : s;

Здесь truncate – это функция, принимающая в качестве параметров строку s и число n, которое задает лимит длины строки. Если длина строки превышает установленный лимит, функция сокращает ее до n символов и добавляет многоточие.

Продвинутое обрезание

Обрезание по границам слов

Чтобы сохранить читаемость текста и избежать неожиданных переносов слов, воспользуйтесь следующим решением:

function truncateAtWord(str, max, ellipsis = '…') {
  if (str.length <= max) return str;
  let trimmed = str.substr(0, max);
  if (str[max] !== ' ') { 
    trimmed = trimmed.substr(0, Math.min(trimmed.length, trimmed.lastIndexOf(' ')));
  }
  return trimmed + ellipsis;
}

Таким образом, мы избегаем некорректного обрезания слов.

Подробнее об этом расскажет наш спикер на видео

Делегирование обрезания CSS

Для визуального укорачивания текстов на странице можно использовать CSS:

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Добавив класс .truncate к элементам, вы получите эстетически приятное обрезание текста без ущерба его смыслу.

Индивидуальное обрезание строк

Не стоит изменять прототип String. Вместо этого используйте прокси JavaScript:

const smartTruncate = new Proxy(String.prototype, {
  apply: function (target, thisArg, [str, length]) {
    return String.prototype.slice.apply(str, [0, length]) + (str.length > length ? '…' : '');
  }
});

smartTruncate('A supercalifragilisticexpialidocious string', 10);

Крайние случаи и принципы работы

Встреча с крайним случаем

Обрезание URL может привести к ошибке "HTTP 404 Страница не найдена". Будьте внимательны, обрезая контент пользователей – это может привести к потере важного контекста

Совместимость с браузерами и библиотеками

Если вы используете CSS для обрезания текста, всегда проверяйте совместимость с различными браузерами. Библиотеки, такие как lodash и underscore.string, предлагают готовые решения для обрезания строк.

Визуализация

Пример обрезания строк:

Длинная строка: "Чёрт, я же говорил тебе не перекармливать эту строку!"
Лимит длины: 20 символов

Процесс обрезания:

const truncate = (s, n) => s.length > n ? s.slice(0, n – 1) + '…' : s;

Результат:

Длинная строка: "Чёрт, я же говорил тебе не перекармливать эту строку!" 🦖
После обрезания: "Чёрт, я же говорил…" 🦏

Таким образом, наш громадный Stringasaurus Rex трансформировался в приятного на вид строкового носорога.

Рекомендации для разработчиков

Инкапсуляция кода

Для обрезания строк рекомендуется использовать функции или методы классов, что поможет избежать дублирования кода и сделать разработку более комфортной.

Тестовые проверки и отладка

Тестирование различных вариантов обрезания строк должно проходить наравне с другими проверками кода для его безупречной работы.

Вопрос размера символов

Учитывайте, что разные символы могут занимать разное количество байтов. Эмодзи или символы азиатских языков могут влиять на точность ваших расчетов.

Полезные материалы

1. String.prototype.slice() – JavaScript | MDN – срезы строк в JavaScript.
2. Truncate String with Ellipsis | CSS-Tricks – примеры использования CSS и JavaScript для обрезания текста.
3. String.prototype.substring() – JavaScript | MDN – описание метода substring.
4. Calculate text width with JavaScript – Stack Overflow – как измерить ширину текста для точного обрезания.
5. JavaScript String length Property – свойство Length на W3Schools.
6. "includes" | Can I use... Support tables for HTML5, CSS3, etc – совместимость метода String.prototype.includes с браузерами.
7. Debouncing and Throttling Explained Through Examples | CSS-Tricks – оптимизация JS событий, которая может пригодиться при обрезании текста.