Преобразование строки в массив символов в JavaScript
Быстрый ответ
Для преобразования строки в массив символов применяются метод Array.from(str)
или оператор расширения [..., str]
:
let str = "Привет!";
let chars = Array.from(str); // ['П', 'р', 'и', 'в', 'е', 'т', '!']
// или
let chars = [...str]; // ['П', 'р', 'и', 'в', 'е', 'т', '!']
Если ваш текст содержит Юникод-символы
При работе с символами Юникода в JavaScript следует быть особенно внимательными. Метод .split('')
может оказаться бессилен перед суррогатными парами.
Предпочтительный вариант использования Array.from()
:
let unity = "🌍🕊️";
let peace = Array.from(unity); // ['🌍', '🕊️']
Результат работы .split('')
может оказаться некорректным:
let peace = unity.split(''); // ['\uD83C', '\uDF0D', '\uD83D', '\uDD4A']
Метод .split('')
не справляется с обработкой суррогатных пар, искажая символы Юникода.
Как правильно работать с символами Юникода: регулярные выражения
Для корректной обработки Юникодовских символов следует использовать регулярные выражения с флагом u
(Unicode) в методе split
:
let unity = "🌍🕊️";
let peace = unity.split(/(?=\p{L}|\p{N}|\p{P}|\p{S})/u); // ['🌍', '🕊️']
Применение цикла 'for ... of ...'
Для сохранения целостности символов Юникода используйте цикл for...of
, поддерживающий Юникод:
let unity = "🌍🕊️";
var peace = [];
for (let globe of unity) {
peace.push(globe); // Целостность мирного символа сохранена
}
Теперь массив peace
содержит ['🌍', '🕊️']
.
До начала работы с ES6 проверьте совместимость
Прежде чем начать использовать функции ES6, такие как оператор расширения или Array.from()
, убедитесь, что ваша среда JavaScript поддерживает эти возможности. Получить эту информацию можно в таблице совместимости ECMAScript или из ресурсов MDN.
Работа с сложными символами при помощи библиотеки
Библиотека grapheme-splitter пригодится при работе с сложными последовательностями символов, такими как эмоджи флагов или семейные эмоджи:
let family = require('grapheme-splitter');
let splitter = new family();
let str = "👨👩👧👦";
let meme = splitter.splitGraphemes(str); // ['👨👩👧👦'] // Вся семья в сборе!
Визуализация
Строка – это что-то вроде флакона геля для душа: на этикетке мы видим название, а внутри – содержание:
Строка: "ФЛАКОН"
Визуализация:
🧴 => ['Ф', 'Л', 'А', 'К', 'О', 'Н']
Код: [...'ФЛАКОН']
Декомпозиция содержимого:
- 🧴 = Исходная строка ("ФЛАКОН")
- Содержимое = Отдельные буквы ('Ф', 'Л', 'А', 'К', 'О', 'Н')
С помощью оператора ...
мы извлекаем содержимое.
Вопрос производительности и большие строки
При работе с очень большими строками метод Array.from
и оператор распространения могут утратить эффективность. В таких случаях спасает цикл for...of
.
let heftyString = '...'; // Огромная строка
let charsArray = [];
for (let char of heftyString) {
charsArray.push(char);
}
Методы работы со строками в устаревших средах
В устаревших средах сочетайте метод доступа к символам charAt
с обычным циклом:
var oldie = "Y2K";
var arr = [];
for (var i = 0; i < oldie.length; i++) {
arr.push(oldie.charAt(i));
}
Такой подход не обеспечивает целостность Юникода, но он поддерживается широко.
Ограничения метода split('')
и многобуквенные знаки
split('')
обрабатывает многосимвольные знаки, такие как некоторые эмоджи или особенные символы иностранных языков, как отдельные элементы, в результате чего могут возникнуть ошибки.