Преобразование строки в массив символов в 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('') обрабатывает многосимвольные знаки, такие как некоторые эмоджи или особенные символы иностранных языков, как отдельные элементы, в результате чего могут возникнуть ошибки.