4 способа преобразования строки в массив символов в JavaScript

Вот 4 способа разбить слово на множество символов. ” Сплит »является наиболее распространенным и более надежным способом. Но с добавлением ES6 в арсенале JS есть больше инструментов для игры с 🧰

Мне всегда нравится видеть все возможные способы решить что -то, потому что тогда вы можете выбрать лучший способ использования. Кроме того, когда вы увидите, как он появляется в чьей -то кодовой базе, вы с легкостью поймете это 👍

const string = 'word';

// Option 1
string.split('');

// Option 2
[...string];

// Option 3
Array.from(string);

// Option 4
Object.assign([], string);

// Result:
// ['w', 'o', 'r', 'd']

Сценарии

Вместо того, чтобы пройти через плюсы и минусы каждого другого пути. Позвольте мне показать вам различные сценарии, в которых один предпочитает другой.

Массив персонажей

Если все, что вы делаете, это хотите отделить строку от каждого строкового символа, все способы хороши и дадут вам одинаковый результат

const string = 'hi there';

const usingSplit = string.split('');
const usingSpread = [...string];
const usingArrayFrom = Array.from(string);
const usingObjectAssign = Object.assign([], string);

// Result
// [ 'h', 'i', ' ', 't', 'h', 'e', 'r', 'e' ]

Конкретные сепараторы

Если вы хотите разделить свою строку определенным символом, то Сплит это путь.

const string = 'split-by-dash';

const usingSplit = string.split('-');
// [ 'split', 'by', 'dash' ]

Другие способы ограничены только каждым строковым символом

const string = 'split-by-dash';

const usingSpread = [...string];
const usingArrayFrom = Array.from(string);
const usingObjectAssign = Object.assign([], string);

// Result:
// [ 's', 'p', 'l', 'i', 't', '-', 'b', 'y', '-', 'd', 'a', 's', 'h' ]

Строки, содержащие смайлики

Если ваши струны содержат смайлики, то Сплит или Object.assign Может быть, не лучший выбор. Давай посмотрим что происходит:

const string = 'cake😋';

const usingSplit = string.split('');
const usingObjectAssign = Object.assign([], string);

// Result
// [ 'c', 'a', 'k', 'e', '�', '�' ]

Однако, если мы используем другие способы, это работает:

const usingSpread = [...string];
const usingArrayFrom = Array.from(string);

// Result
// [ 'c', 'a', 'k', 'e', '😋' ]

Это потому, что Сплит разделяет символы от UTF-16 кодовых единиц, которые проблематичны, потому что символы эмодзи являются UTF-8. Если мы посмотрим на наши emoji '😋' На самом деле он состоит из 2 символов, а не 1, как мы воспринимаем.

'😋'.length; // 2

Это то, что называется Графические кластеры – где пользователь воспринимает его как 1 единый блок, но под капотом на самом деле состоит из нескольких единиц. Новые методы Распространение а также Array.from лучше подготовлены, чтобы справиться с ними и разделить вашу строку Графические кластеры 👍

Предостережение об Object.assign ⚠

Одна вещь, чтобы отметить Object.assign это то, что это на самом деле не производит чистый массив. Давайте начнем с его определения

Метод object.assign () копирует все перечисленные собственные свойства из одного или нескольких исходных объектов в целевой объект

Ключ есть «копии все перечисляемые собственные свойства». Итак, что мы здесь делаем Object.assign ([], нить) Это копирует все наши свойства строки в нашем новом массиве. Это означает, что у нас есть массив плюс несколько методов струн.

Тест TypeScript: массив результатов не является строкой [] Тип 😱

Это более очевидно, если мы используем игровую площадку Typescript. Не стесняйтесь скопировать код и вставить в детская площадка , где вы можете зависать на переменной, чтобы просмотреть типы. Поскольку это всего лишь статья, я вставлю здесь результат, чтобы вы могли следовать.

const word = 'word';

const usingSplit = string.split('');
const usingSpread = [...string];
const usingArrayFrom = Array.from(string);

// Result:
// string[] 👈 Which means it's an Array of strings

Однако, если мы посмотрим на тип результата Object.assign Анкет Это не дает нам множества струн.

const usingObjectAssign = Object.assign([], string);

// Result:
// never[] & "string" 👈 which means NOT Array of strings 😱

Тест на типах: массив результатов может получить доступ к свойствам строки 😱

Мы можем сделать дальнейшее проверить это, получив свойство, которое должно быть доступно только для Строка Анкет

const string = 'string';
const array = [];

string.bold; // ✅(method) String.bold(): string
array.bold; //  ❌Property 'bold' does not exist on type

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

Array.from('string').bold;
// Property 'bold' does not exist on type

Но если мы позвоним жирный На нашем предположительно массиве, созданном Object.assign , это работает 😱

Object.assign([], 'string').bold;
// (method) String.bold(): string

☝ И это потому, что Object.assign Копии над всеми свойствами из исходной строки. Вот как я бы объяснил это в терминах без дев. Вы идете в магазин, чтобы купить собаку. Но затем хранить Object.assign Продает вам собаку с крыльями дракона. Это звучит очень круто, но на самом деле это не питомец, дружелюбный. Хм… Я не думаю, что это мой лучший пример. Но я думаю, ты понимаешь мою точку зрения 😂

Преобразование кажется нормальным в браузере 🙂

Теперь я не думаю, что это крупный нарушитель сделки, причина:

Похоже, что у браузеров есть какой -то механизм, чтобы «безопасно» делать объект. Assign ([], «String») и избегайте добавления методов этой строки в массив.

Спасибо @lukeshiru : за то, чтобы поделиться этим знанием для меня 👏 Он также создал код игровой площадки Typescript, чтобы вы могли увидеть> ссылка на сайт

Вклад сообщества

[@Captainorion ] ( https://twitter.com/captainorion_/status/1238999904567271425?s=21):_ Превратить строку в массив char, но используя функцию карты 🤣

Array.prototype.map.call('word', eachLetter => eachLetter);

// ['w', 'o', 'r', 'd']

@Hiumesh2 : Array.prototype.slice.call ('string') Сделай трюк тоже

@inside.code: Дополнительная информация: безопаснее использовать оператор спреда (второй метод), а не String.prototype.split ('') (первый метод), потому что split () не работает с некоторыми редкими персонажами.

@faerberrr: У меня была строка, которая содержала специальные символы, такие как åāă и т.п. Когда я разделяю их, используя .расколоть ('') Метод и Ran .длина , он вернулся вдвое больше ожидаемого значения! Переключение на оператор спреда установил проблему.

Ресурсы

Спасибо за чтение ❤ Скажи привет! Instagram | Twitter | Samanthaming.com

Оригинал: “https://dev.to/samanthaming/4-ways-to-convert-string-to-character-array-in-javascript-iij”