Если вы хотя бы отдаленно знакомы с JavaScript, велика вероятность, что вы раньше использовали строковую функцию JavaScript. Это могло быть concat() или trim(), но маловероятно, что вы использовали все или даже большинство из них.

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

Мотивация для этой статьи - это функция, которая мне очень понравилась в Jira / BitBucket, которая автоматически объединяет номер заявки и описание Jira в имя ветки при создании новой ветки git.

К сожалению, этой функции нет в Azure DevOps. Посмотрим, не сможем ли мы воссоздать его с помощью JavaScript!

Начнем с простой строки, которая будет содержать номер и описание нашего билета.

const userFeature = ` 12345: Create shipping component with 'Use this address' and 'Add new address...' buttons `;

1.) обрезать ()

Итак, первое, что вы можете заметить в строке userFeature, - это пробел перед числом ` 12345 и после последнего слова buttons `.

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

trimStart () - можно использовать, если вы хотите обрезать только начало строки, переходя от ` 12345 к`12345

trimEnd () - можно использовать, если вы хотите обрезать только конец строки, переводя buttons ` в buttons`

const userFeature = ` 12345: Create shipping component with 'Use this address' and 'Add new address...' buttons `;
const trimmedUserFeature = userFeature.trim();
console.log(`Result: ${trimmedUserFeature}`);
//Result: 12345: Create shipping component with 'Use this address' and 'Add new address...' buttons

2.) заменить ()

При создании ветки git нельзя использовать большинство специальных символов и пробелов. Это хорошее применение для функции replace().

Первый replace() заменит все пустые места на -.

Второй replace() заменит все в строке, кроме символов A-Z, a-z, 0–9 или -, на пустую строку.

Примечание: Вы можете использовать строку для replace(), однако я не рекомендую этого делать, поскольку она заменит только первое вхождение. Regex заменит все вхождения.

const userFeature = ` 12345: Create shipping component with 'Use this address' and 'Add new address...' buttons `;
const formattedUserFeature = userFeature
    .trim()
    .replace(/ /g, '-')
    .replace(/[^A-Za-z0-9-]+/g, '');
console.log(`Result: ${formattedUserFeature}`);
//Result: 12345-Create-shipping-component-with-Use-this-address-and-Add-new-address-buttons

3.) toLowerCase () и toUpperCase ()

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

Я буду использовать toLowerCase(), чтобы следовать соглашению об именах для веток git.

const userFeature = ` 12345: Create shipping component with 'Use this address' and 'Add new address...' buttons `;
const formattedUserFeature = userFeature
    .trim()
    .replace(/ /g, '-')
    .replace(/[^A-Za-z0-9-]+/g, '')
    .toLowerCase();
console.log(`Result: ${formattedUserFeature}`);
//Result: 12345-create-shipping-component-with-use-this-address-and-add-new-address-buttons

4.) concat ()

Что, если вы хотите использовать ту же идею для создания файла вместо ветки git? Мы можем сделать это с concat(), просто добавив соответствующее расширение файла в качестве параметра.

Примечание: concat() отрицательно сказывается на производительности, поэтому лучше всего добавить .js со строковым шаблоном или простым оператором присваивания (+)

const userFeature = ` 12345: Create shipping component with 'Use this address' and 'Add new address...' buttons `;
const formattedUserFeature = userFeature
    .trim()
    .replace(/ /g, '-')
    .replace(/[^A-Za-z0-9-]+/g, '')
    .toLowerCase()
    .concat('.js');
console.log(`Result: ${formattedUserFeature}`);
//Result: 12345-create-shipping-component-with-use-this-address-and-add-new-address-buttons.js

5.) ломтик ()

Итак, теперь, когда мы выполнили упомянутые изменения с trim(), replace(), toLowerCase() и concat(), чтобы сделать строку formattedUserFeature, давайте будем использовать эту строку для следующих операций.

Предположим, вы использовали описанные выше методы для создания нескольких веток (или файлов) git и хотите получить все номера билетов. Предполагая, что все номера билетов состоят из пяти цифр, вы можете добавить beginIndex из 0 и endIndex из 5.

const formattedUserFeature = `12345-create-shipping-component-with-use-this-address-and-add-new-address-buttons.js`;
console.log(`Result: ${formattedUserFeature.slice(0, 5)}`);
//Result: 12345

6.) начинается с () / заканчивается с ()

И startsWith(), и endsWith() будут искать начало или конец строки, возвращая логическое значение.

Это может быть полезно, если вы пытаетесь определить все .js или .ts файлы. Вы также можете использовать это, чтобы определить все файлы или ветки, которые начинаются с 123 и т. Д.

const formattedUserFeature = `12345-create-shipping-component-with-use-this-address-and-add-new-address-buttons.js`;
console.log(`Result: ${formattedUserFeature.startsWith('10')}`);
//Result: false
console.log(`Result: ${formattedUserFeature.endsWith('.js')}`);
//Result: true

7.) включает ()

Если вы хотите определить, существует ли слово (string) в другой строке, вы можете использовать includes().

В нашем примере мы могли бы захотеть увидеть все файлы или ветки, относящиеся к shipping, чтобы мы могли передать это в качестве параметра includes(), который вернет логическое значение.

const formattedUserFeature = `12345-create-shipping-component-with-use-this-address-and-add-new-address-buttons.js`;
console.log(`Result: ${formattedUserFeature.includes('shipping')}`);
//Result: true

Дополнительная информация

Если вам понравилась эта статья, и вы хотите выполнить этот код и оставаться в курсе будущих статей, которые я публикую на Medium, пожалуйста, посетите этот репозиторий GitHub.

Чтобы узнать еще больше, я бы посоветовал проверить Строки JavaScript в сети для разработчиков Mozilla.

Вы также можете просто выполнить этот код локально или в Chrome DevTools, используя приведенную ниже суть GitHub.

JavaScript на простом английском языке

Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube в Decoded!