Вирішено: обрізати текст

Останнє оновлення: 09/21/2023
Автор: JavaScript SourceTrail

Усічення тексту є звичайним завданням у веб-розробці, особливо коли ви маєте справу з довгим текстовим вмістом, який потрібно вмістити в певні межі презентації, не перевантажуючи перегляд. Зазвичай це трапляється в таких сценаріях, як стрічки новин, попередній перегляд тексту або будь-де, де ви можете вибрати функцію типу «читати далі».

Підхід до проблеми скорочення

Щоб скоротити текст у JavaScript, ми можемо використовувати кілька різних методів, використовуючи чистий JavaScript або використовуючи бібліотеки, такі як Lodash, кожна з яких має власний підхід і міркування щодо варіантів використання.

Ключовим у всіх цих підходах є підрядок() метод. Цей метод повертає частину рядка між початковим і кінцевим індексами або до кінця рядка. 

let str = "Hello world!";
let res = str.substring(1, 4);

У цьому коді JavaScript ми створюємо рядок «Hello world!» а потім за допомогою методу substring повернути її частину. У цьому випадку res буде «ell».

Покрокове пояснення

Давайте створимо функцію JavaScript, щоб скоротити даний фрагмент тексту до заданої довжини: 

function truncateString(str, num) {
  if (str.length <= num) {
    return str
  }
  return str.slice(0, num > 3 ? num - 3 : num) + '...'
}

Ось як це працює:

  • Функція приймає два параметри: рядок і максимальну довжину усіченого рядка.
  • Якщо довжина рядка менша або дорівнює максимальній довжині, функція поверне вихідний рядок. Це означає, що якщо наш рядок коротший за довжину, до якої ми хочемо обрізати, він взагалі не буде обрізаний.
  • Якщо рядок довший, функція розрізає його. Якщо максимальна довжина більша за 3, він розрізає рядок до (довжина – 3), а потім додає «…» у кінці.

Використання бібліотек

Хоча власні функції JavaScript забезпечують надійне та швидке рішення для скорочення тексту, є також кілька бібліотек, які можна використовувати для досягнення подібних результатів.

Однією з таких бібліотек є Lodash, яка включає a усікати функція. Функція скорочення Lodash є дещо складнішою, дозволяючи вам вказати довжину скорочення, кінцеві символи та навіть підтримувати цілі слова. 

_.truncate('this is some long text', {
  'length': 10,
  'separator': ' '
});
// => 'this is...'

У цьому прикладі функція truncate Lodash використовується для скорочення рядка після певної кількості символів, гарантуючи, що слова не розрізаються навпіл. Це відкриває більше можливостей для налаштування та контролю над тим, як ваш текст скорочується.

Загалом, скорочення тексту в JavaScript можна здійснити різними способами, кожен з яких пропонує різний рівень налаштування та складності, а спосіб, який ви виберете, залежить від потреб вашого проекту. Головне пам’ятати, що який би метод ви не вибрали, переконайтеся, що він найкраще підходить для взаємодії з користувачем, а також загального макета та дизайну веб-сторінки.

Схожі повідомлення: