Справочник · JavaScript

Метод trim(): пробелы по краям строки

Редакция PraktumОбновлено 25 октября 20264 мин чтенияУровень: новичок

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

Минимальный пример

const input = document.querySelector('#email');
const email = input.value.trim();

if (email === '') {
  showError('Введите email');
}

Пользователь мог случайно поставить пробел или вставить адрес с переносом строки. Без trim поле из одних пробелов прошло бы проверку на пустоту, а email с пробелом не совпал бы с сохранённым.

Что удаляет trim

Пробел нулевой ширины не считается пробельным символом и остаётся. Он иногда попадает в текст при копировании из мессенджеров; убрать его можно через replace(/\u200B/g, '').

trimStart и trimEnd

'  текст  '.trimStart();  // 'текст  '
'  текст  '.trimEnd();    // '  текст'

// убрать хвостовые пробелы в каждой строке текста
text.split('\n').map((line) => line.trimEnd()).join('\n');

Обрезка с одной стороны нужна, когда отступы в начале значимы: код, стихи, форматированный текст. trimEnd убирает лишние пробелы в конце строк, сохраняя отступы.

Пробелы внутри строки

'  Анна   Петрова  '.trim();                      // 'Анна   Петрова'
'  Анна   Петрова  '.trim().replace(/\s+/g, ' ');  // 'Анна Петрова'

trim не трогает середину строки. Чтобы схлопнуть повторяющиеся пробелы, добавь replace с регулярным выражением. Это удобная нормализация имён, адресов и поисковых запросов.

Очистка всех полей формы

form.addEventListener('submit', (event) => {
  const data = Object.fromEntries(new FormData(form));
  for (const key in data) {
    if (typeof data[key] === 'string') data[key] = data[key].trim();
  }
  if (!data.name) {
    event.preventDefault();
    showError('Введите имя');
  }
});

Удобно очищать все текстовые поля разом перед проверкой. Сервер всё равно должен повторять trim и проверку: данные могут прийти не только из твоей формы.

required и поле из пробелов

<input name="name" required pattern=".*\S.*" title="Имя не может состоять из пробелов">

Встроенная проверка required считает поле из пробелов заполненным. Атрибут pattern с \S требует хотя бы один непробельный символ. Но надёжнее проверить value.trim() в JavaScript и на сервере.

trim не меняет исходную строку

let name = '  Аня  ';
name.trim();          // результат потерян
name = name.trim();   // правильно

Строки в JavaScript неизменяемы, поэтому все строковые методы возвращают новую строку. Результат нужно сохранить в переменную или сразу использовать.

trim или replace

Частые ошибки

• Проверяют поле на пустоту без trim.
• Вызывают trim и не сохраняют результат.
• Ждут, что trim уберёт пробелы в середине строки.
• Обрезают пароли — пробелы в них могут быть частью пароля.
• Полагаются только на required для поля из пробелов.

Доступность

Не обрезай значение поля прямо во время ввода — курсор может прыгнуть, и человек не поймёт, куда делся пробел. Чисти значение при отправке или при потере фокуса. Сообщения об ошибке «поле пустое» связывай с полем через aria-describedby.

Поддержка браузерами

trim поддерживается всеми браузерами. trimStart и trimEnd — во всех актуальных браузерах.

function normalizeName(value) {
  const clean = value.trim().replace(/\s+/g, ' ');
  if (!clean) return null;
  return clean
    .split(' ')
    .map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase())
    .join(' ');
}

normalizeName('  анна   петрова '); // 'Анна Петрова'