[День-4] Оволодіння перебором рядків у JavaScript: 4 підходи, які ви повинні знати

У попередніх статтях ми розглянули основи рядків у JavaScript, включаючи їх визначення, методи та магію регулярних виразів (regex) для маніпулювання рядками. Тепер давайте поглиблено дослідимо рядки і з'ясуємо, як ефективно їх перебирати. Перебір рядків — це важлива навичка для виконання різних операцій, таких як трансформації, валідації чи складні маніпуляції.

У цій статті ми розглянемо чотири методи перебору рядків з детальними прикладами та сценаріями використання. Обов'язково ознайомтесь з останнім методом — справжнім скарбом для просунутих користувачів!

1. Використання split() для трансформації рядків

Метод split() розбиває рядок на масив підрядків. Коли ви використовуєте порожній рядок ("") як роздільник, він розбиває рядок на окремі символи. Це дозволяє використовувати методи масивів, такі як map(), для трансформацій.

const str = "hello";  

// Крок 1: Розбиваємо рядок на масив символів  
const charArray = str.split(""); // ["h", "e", "l", "l", "o"]  

// Крок 2: Використовуємо .map() для трансформації кожного символа  
const transformedArray = charArray.map((char, index) => `${index + 1}:${char}`);  

// Крок 3: Об'єднуємо трансформований масив назад в рядок  
const result = transformedArray.join(", "); // "1:h, 2:e, 3:l, 4:l, 5:o"  

console.log(result);

Сценарій використання:

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

2. Використання for...of для прямого доступу до символів

Цикл for...of є простим і чистим способом перебирати рядки. Він безпосередньо надає кожен символ без необхідності керувати індексами.

const str = "hello";  

for (const char of str) {  
 console.log(char);  
}

Вивід:

h  
e  
l  
l  
o

Використовуйте for...of для сценаріїв, які потребують послідовної обробки символів без турбот про індекси, наприклад, для перевірки певних символів або застосування базових трансформацій.

3. Використання for...in для індексованого перебору

Цикл for...in надає індекси символів рядка. Ви можете використовувати ці індекси для доступу до кожного символа за допомогою методів, таких як charAt() або запису в дужках.

const str = "hello";  

for (const idx in str) {  
 console.log(str.charAt(idx));  
}

h  
e  
l  
l  
o

Сценарій використання:

Використовуйте for...in, коли вам потрібні і індекс, і символ для таких завдань, як впровадження складних трансформацій або валідацій.

4. Використання Symbol Iterator для просунутого перебору

Кожен рядок у JavaScript є ітерабельним завдяки вбудованому Symbol.iterator. Цей метод повертає об'єкт ітератора, який надає метод next(), що дозволяє вручну перебирати символи один за одним.
Цей підхід менш відомий, але дуже гнучкий для складних сценаріїв використання.

const str = "hello";  
const iterator = str[Symbol.iterator]();  

console.log(iterator.next()); // { value: 'h', done: false }  
console.log(iterator.next()); // { value: 'e', done: false }  
console.log(iterator.next()); // { value: 'l', done: false }  
console.log(iterator.next()); // { value: 'l', done: false }  
console.log(iterator.next()); // { value: 'o', done: false }  
console.log(iterator.next()); // { value: undefined, done: true }

Вивід:

Кожен виклик next() повертає об'єкт з двома властивостями:

• value: Поточний символ.
• done: Логічне значення, яке вказує, чи завершено перебір.

Сценарій використання:

Використовуйте Symbol.iterator для точного контролю перебору рядка, наприклад, для впровадження кастомної логіки ітерації або інтеграції з генераторами.

Коли використовувати який метод?

• split(): Найкраще для трансформацій, що вимагають методів масивів.
• for...of: Ідеально для простого послідовного оброблення.
• for...in: Корисно, коли потрібні індекси.
• Symbol.iterator: Ідеально підходить для складних сценаріїв, що потребують низькорівневого контролю.

Що далі?

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

Сподобалася стаття? Підключайтесь до мене на LinkedIn, щоб отримувати більше ідей з JavaScript та сучасної веб-розробки. Залишайтеся з нами для наступної глави нашої подорожі в JavaScript! adios

Перекладено з: [Day-4] Mastering String Traversal in JavaScript: 4 Approaches You Must Know