Как обрезать строку в JS (JavaScript)

В JavaScript можно столкнуться с ситуациями, когда требуется обрезать строку до определённой длины. Например, когда требуется отобразить краткое изложение записи в блоге или ограничить количество символов в вводимых пользователем данных. Как обрезать строку в JS, где это необходимо?

В этой статье мы рассмотрим как:

• обрезать строку до определённой длины;
• добавить многоточие (…), когда строка слишком длинная;
• сократить строку до ближайшего слова;
• удалять все символы после первой заглавной буквы в строке;
• извлекать часть даты из строки;
• округлять строку до ближайшего целого числа;
• заменить среднюю часть строки многоточием (…);
• использовать метод slice() для обрезки строки в JavaScript.

Обрезание строки по длине

В частности, одним из основных подходов к обрезанию строки в JavaScript является указание максимальной длины. Для того, чтобы решить эту задачу используется метод substring(). Давайте обрежем строку до определённой длины, используя его:

function truncateToLength(inputString, maxLength) {
  return inputString.length > maxLength 
    ? inputString.substring(0, maxLength) 
    : inputString;
}

const originalString = 'JavaScript is fascinating!';
const truncatedString = truncateToLength(originalString, 11);
console.log(truncatedString);  
// Результат: 'JavaScript'

Как обрезать строку в JS многоточием

Стоит отметить, что добавление ellipsis (…), когда надо обрезать конец строки является распространенным случаем в дизайне сайтов и приложений. Например:

function truncateWithEllipsis(inputString, maxLength) {
  return inputString.length > maxLength
    ? inputString.substring(0, maxLength - 3) + '...'
    : inputString;
}

const originalString = 'JavaScript is fascinating!';
const truncatedString = truncateWithEllipsis(originalString, 15);
console.log(truncatedString);
// Результат: 'JavaScript i...'

Функция truncateWithEllipsis() обрезает заданную строку до максимальной длины, указанной в maxLength. Если длина строки превышает максимальную, она укорачивается путём удаления последних трёх символов и добавления «…» для обозначения обрезания строки. В противном случае возвращается исходная строка.

Обрезание строки до ближайшего слова

Подобные действия позволяют улучшить читаемость. Метод массива lastIndexOf() может помочь в определении последнего пробела перед достижением максимальной длиной:

function truncateToNearestWord(inutString, maxLength) {
  if (inutString.length <= maxLength) return inutString;

  const lastSpaceIndex = inutString.lastIndexOf(' ', maxLength);
  return inutString.substring(0, lastSpaceIndex) + '...';
}

const originalString = 'JavaScript is fascinating!';
const truncatedString = truncateToNearestWord(originalString, 10);
console.log(truncatedString);
// Результат: 'JavaScript...'

Функция truncateToNearestWord() усекает заданную выходную строку до указанной максимальной длины. Это позволяет найти последний пробел в пределах указанной длины и сокращает строку до этой точки, добавляя многоточие.

Обрезание строки после определённого слова

Возможный способ сделать строку короче и понятнее — обрезать её после определённого слова. Используйте метод indexOf(), можно найти позицию нужного слова и обрезать строку. Например:

function truncateAfterWord(inputString, word) {
  const wordIndex = inputString.indexOf(word);
  return wordIndex !== -1
    ? inputString.substring(0, wordIndex + word.length) + '...'
    : inputString;
}

const originalString = 'JavaScript offers versatility and performance!';
const truncatedString = truncateAfterWord(originalString, 'versatility');
console.log(truncatedString);
// Результат: 'JavaScript offers versatility...'

Функция truncateAfterWord() сокращает заданную строку, обрезая её после указанного слова и добавляя многоточие в конце.

Обрезание строки до первой заглавной буквы

Иногда может потребоваться обрезать строку до определённого символа, чтобы она заканчивалась при первом появлении заглавной буквы. Этого можно добиться путём перебора символов и определения индекса:

function truncateToFirstCapital(inputString) {
  const capitalIndex = Array.from(inputString)
    .findIndex(char => char === char.toUpperCase());
    
  return (capitalIndex !== -1)
    ? inputString.substring(0, capitalIndex) + '...'
    : inputString;
}

const originalString = 'javaScript is fascinating!';
const truncatedString = truncateToFirstCapital(originalString);
console.log(truncatedString);
// Результат: 'java...'

Функция truncateToFirstCapital сокращает текст до первой заглавной буквы. Это ценный подход к обобщению информации, позволяющий эффективно и лаконично выделять ключевые моменты.

Как обрезать строку в JS до указанной даты

В определённых ситуациях может потребоваться обрезать строку, чтобы включить только часть даты. Ниже представлен простой пример использования метода split() для извлечения даты из строки:

function truncateToDateString(inputString) {
  const datePortion = inputString.split(' ')[2];
  return datePortion;
}

const originalString = 'Published on: 2023-12-24';
const truncatedDateString = truncateToDateString(originalString);
console.log(truncatedDateString);
// Результат: '2023-12-24'

Функция truncateToDateString эффективно извлекает дату из заданной входной строки с помощью метода split().

Как обрезать строку в JS до целого числа

Если требуется обрезать строку, чтобы она всегда заканчивалась целым словом или определённым индексом. Например:

function truncateToWholeNumber(inputString, maxLength) {
  const wholeNumberIndex = Math.floor(maxLength / 10) * 10;
  return inputString.length > wholeNumberIndex 
    ? inputString.substring(0, wholeNumberIndex) + '...' 
    : inputString;
}

const originalString = 'JavaScript is feature-rich and dynamic!';
const truncatedString = truncateToWholeNumber(originalString, 15);
console.log(truncatedString);  
// Результат: 'JavaScript...'

Функция truncateToWholeNumber() эффективно сокращает текст до ближайшего кратного 10 в пределах заданной строки.

Раскрывающийся список при обрезании строки

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

function truncateForDropdown(inputString, maxWidth) {
  let truncatedString = inputString;
  while (truncatedString.length > maxWidth) {
    truncatedString = truncatedString.slice(0, -1);
  }

  return truncatedString;
}

const originalString = 'JavaScript is dynamic and efficient!';
const truncatedDropdownString = truncateForDropdown(originalString, 10);
console.log(truncatedDropdownString);  
// Результат: 'JavaScript'

Функция truncateForDropdown() укорачивает исходную строку, чтобы она соответствовала заданному размеру. Такой алгоритмический подход обеспечивает оптимальное использование пространства в выпадающих меню.

Обрезание середины строки

Как правило, в случаях, когда возникает необходимость обрезать середину строки, можно использовать комбинацию методов substring() и slice():

function truncateMiddle(inputString, maxLength) {
  if (inputString.length <= maxLength) return inputString;
  
  const midPoint = Math.floor(inputString.length / 2);
  const remainingLength = maxLength - 3; // Резервирование места для многоточия "..."
  
  return inputString
    .substring(0, midPoint - remainingLength / 2) + '...' + 
    inputString.slice(midPoint + remainingLength / 2);
}

const originalString = 'JavaScript is versatile and powerful!';
const truncatedString = truncateMiddle(originalString, 15);
console.log(truncatedString);  
// Результат: 'JavaScript i...and powerful!'

Функция truncateMiddle() сокращает входную строку до заданной максимальной длины, удаляя центральную часть. Вместе с тем, она вычисляет среднюю точку и стратегически сохраняет важные сегменты с обеих сторон, сохраняя целостность данных и оставляя место для многоточия «…».

Читайте также: Как перебрать циклом объект в JavaScript.

Как обрезать строку в JS с помощью метода slice()

Другой эффективный метод обрезания строки — slice(). Он позволяет обрезать часть строки на JS на основе заданных индексов. Например:

function truncateUsingSlice(inputString, start, end) {
  return (inputString.length > end)
    ? inputString.slice(start, end) + '...'
    : inputString;
}

const originalString = 'JavaScript is incredibly versatile!';
const truncatedString = truncateUsingSlice(originalString, 0, 10);
console.log(truncatedString);
// Результат: 'JavaScript...'

Что касается функции truncateUsingSlice(), то она использует метод slice() для извлечения части исходной строки, определяемой указанными индексами start и end. Это позволяет легко обрезать строку и добавить «…», если она слишком длинная.

Заключение

Чтобы эффективно усекать строки в JavaScript, необходимо знать различные методы и их преимущества. В зависимости от конкретных целей может потребоваться использовать разные подходы для проектирования пользовательского интерфейса, манипулирования данными или оптимизации производительности.

Само собой разумеется, все используемые для этого методы, включая slice(), substring(), split(), indexOf() и lastIndexOf(), имеют полную поддержку современных браузеров.