JavaScript: trim()

как именно функция trim() удаляет пробелы в начале и конце строки

2023-04-14 I Shar

время чтения 3 мин.

Как удалить пробелы в начала или в конце строки? Для JavaScript такой проблемы не существует - все очень просто: чтобы избавиться от пробельных символов в начале строки есть функция trimStart(), в конце строки - trimEnd(), а для удаления пробелов как в начале, так и в конце строки - trim().

const string = "   hi   ";
string.trimStart(); // "hi   "
string.trimEnd();   // "   hi"
string.trim();      // "hi"

Содержание

Возвращаемое значение

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

Например:

const string = "   hi   ";
string.trimStart(); // "hi   "
string.trimEnd();   // "   hi"
string.trim();      // "hi"
console.log(string); // "   hi   "

Пробельные символы

Итак, trim() и другие методы этой группы удаляют пробельные символы. Что же к ним относится?

Это:

пробел,
знак табуляции,
неразрывный пробел,
символы разрыва строки.

Символы разрыва строки

Возможно Вы удивитесь, но символы разрыва строки относятся к пробельным символам. Разберем на примере:

'hi \n'.trim(); // "hi"
'hi \t'.trim(); // "hi"
'hi \r'.trim(); // "hi"

Многострочные конструкции

В JavaScript можно встретить многострочные конструкции - шаблонные литералы. Хорошей новостью будет то, что метод trim() будет корректно работать и с ними.

const multiLine = `
hi
`;
multiline.trim(); // "hi"

Словосочетания

Следует помнить, что метод trim() работает только с пробелами в начале и в конце строки и не удаляет пробелы между словами.

Словосочетания, как строчные литералы

Здесь работают те же правила, что и для шаблонных литералов, содержащих только одно слово. С помощью trim() можно удалить только пробельные символы перед первым словом и после последнего слова конструкции.

const multiLine = `
hi
there
`;
multiLine.trim();
/*
вернет:
"hi
there"
*/

Псевдонимы

trimStart и trimLeft

trimStart() удаляет все пробельные символы от начала строки до первого непробельного символа.

До сих пор некоторые разработчики используют метод trimLeft(). Это псевдоним. Результаты полностью идентичны.

const string = "   hi   ";
trimEnd(string);   // "hi   ";
trimRight(string); // "hi   ";

trimEnd и trimRight

trimEnd() удаляет пробелы в конце строки. Для него псевдоним - trimRigth().

const string = "   hi   ";
trimEnd(string);   // "   hi";
trimRight(string); // "   hi";

Какой синтаксис лучше?

Согласно спецификации ECMAScript, методы trimStart и trimEnd являются предпочтительными и рекомендуемыми. Синтаксис trimLeft и trimRight сохранен для обеспечения совместимости со старым кодом.

Таким образом, в этом противостоянии побеждают trimStart и trimEnd.

Почему появились псевдонимы?

Методы trimLeft и trimRight появились первыми. Однако, в дальнешем было принято решение использовать синтаксис trimStart и trimEnd, в связи с тем, что такое написание сходно с названиями других встроенных методов, например: padStart и padEnd. Такой подход позволяет сделать конструкции языка JavaScript более понятными и однородными.

Для сохранения совместимости с уже написанным ранее кодом методы trimLeft и trimRight были сохранены, как псевдонимы, позволяя использовать устаревший синтаксис в старых проектах.

Применение

trim

Обычно все пользуются методом trim(), например, для удаления лишних пробелов значений полей ввода.

const inputValue = document.getElementById('search').value.trim();

trimStart

Метод trimStart() может пригодиться при работе со строками документа в разметке markdown, когда нужно удалить только пробельные символы в начале строки, не затрагивая пробелы и символы разрыва в конце строки.

- List Item
  - Sub List Item
  - Sub List Item

trimEnd

В отношении метода trimEnd() нет каких-то выдающихся мыслей, но возможно он пригодится для удаления символов разрыва строки.

Браузеры

Методы удаления пробельных символов trimStart и trimEnd поддерживаются последними версиями всех пополуярных браузеров, кроме Internet Explorer.

Альтернатива

Вместо метода trim можно использовать регулярное выражение:

const string = '  hi   ';
string.replace(/ /g, ''); // "hi"

Спасибо за внимание.

Написано по материалам статьи Samantha Ming “JavaScript String trim()”.

I Shar