Comment obtenir une chaîne dans un tableau de caractères en JavaScript?

Comment convertir une chaîne en un tableau de caractères en JavaScript?

Je pense obtenir une chaîne comme "Hello world!"dans le tableau
['H','e','l','l','o',' ','w','o','r','l','d','!']

Remarque: ce n'est pas compatible Unicode. "I💖U".split('')résulte dans le tableau de 4 caractères ["I", "�", "�", "u"]qui peut conduire à des bugs dangereux. Voir les réponses ci-dessous pour des alternatives sûres.

Il suffit de le diviser par une chaîne vide.

var output = "Hello world!".split('');
console.log(output);

Voir les String.prototype.split()documents MDN .

Comme hippie trail suggère , la réponse de Meder peut briser les paires de substitution et mal interpréter « caractères. » Par exemple:

// DO NOT USE THIS!
> '𝟘𝟙𝟚𝟛'.split('')
[ '�', '�', '�', '�', '�', '�', '�', '�' ]

Je suggère d'utiliser l'une des fonctionnalités ES2015 suivantes pour gérer correctement ces séquences de caractères.

Spread syntax ( déjà répondu par insertusernamehere)

> [...'𝟘𝟙𝟚𝟛']
[ '𝟘', '𝟙', '𝟚', '𝟛' ]

Array.from

> Array.from('𝟘𝟙𝟚𝟛')
[ '𝟘', '𝟙', '𝟚', '𝟛' ]

uDrapeau RegExp

> '𝟘𝟙𝟚𝟛'.split(/(?=[\s\S])/u)
[ '𝟘', '𝟙', '𝟚', '𝟛' ]

Utilisez /(?=[\s\S])/uau lieu de /(?=.)/ucar .ne correspond pas aux sauts de ligne .

Si vous êtes encore à l'ère ES5.1 (ou si votre navigateur ne gère pas correctement cette expression régulière - comme Edge), vous pouvez utiliser cette alternative (transposée par Babel ):

> '𝟘𝟙𝟚𝟛'.split(/(?=(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]))/);
[ '𝟘', '𝟙', '𝟚', '𝟛' ]

Notez que Babel essaie également de gérer correctement les substituts inégalés. Cependant, cela ne semble pas fonctionner pour les substituts bas inégalés.

Testez tout dans votre navigateur:

function run_test(){
  str=document.getElementById('nonBMP').checked ? '𝟘_NL_𝟙_HIGH_𝟚_LOW_𝟛' : '0_NL_1_HIGH_2_LOW_3';
  str=str.replace('_NL_'  ,document.getElementById('nl'  ).checked ? '\n'          : '');
  str=str.replace('_HIGH_',document.getElementById('high').checked ? '𝟘'.charAt(0) : '');
  str=str.replace('_LOW_' ,document.getElementById('low' ).checked ? '𝟘'.charAt(1) : '');
  
  //wrap all examples into try{ eval(...) } catch {} to aloow script execution if some syntax not supported (for example in Internet Explorer)
        document.getElementById("testString"   ).innerText=JSON.stringify(str);
  try { document.getElementById("splitEmpty"   ).innerText=JSON.stringify(eval('str.split("")'));            } catch(err) { }
  try { document.getElementById("splitRegexDot").innerText=JSON.stringify(eval('str.split(/(?=.)/u)'));      } catch(err) { }
  try { document.getElementById("spread"       ).innerText=JSON.stringify(eval('[...str]'));                 } catch(err) { }
  try { document.getElementById("arrayFrom"    ).innerText=JSON.stringify(eval('Array.from(str)'));          } catch(err) { }
  try { document.getElementById("splitRegex"   ).innerText=JSON.stringify(eval('str.split(/(?=[\\s\\S])/u)')); } catch(err) { }
  try { document.getElementById("splitBabel"   ).innerText=JSON.stringify(eval('str.split(/(?=(?:[\\0-\\uD7FF\\uE000-\\uFFFF]|[\\uD800-\\uDBFF][\\uDC00-\\uDFFF]|[\\uD800-\\uDBFF](?![\\uDC00-\\uDFFF])|(?:[^\\uD800-\\uDBFF]|^)[\\uDC00-\\uDFFF]))/)')); } catch(err) { }
}


document.getElementById('runTest').onclick=run_test;

th, td {
    border: 1px solid black;
    padding: 4px;
}

<div><input type="checkbox" id="nonBMP" checked /><label for="nonBMP">Codepoints above U+FFFF</label></div>
<div><input type="checkbox" id="nl"     checked /><label for="nl"    >Newline</label></div>
<div><input type="checkbox" id="high"           /><label for="high"  >Unmached high surrogate</label></div>
<div><input type="checkbox" id="low"            /><label for="low"   >Unmached low surrogate</label></div>
<button type="button" id="runTest">Run Test!</button>

<table>
  <tr><td>str=</td>                     <td><div id="testString"></div></td></tr>
  <tr><th colspan="2">Wrong:</th></tr>
  <tr><td>str.split("")</td>            <td><div id="splitEmpty"></div></td></tr>
  <tr><td>str.split(/(?=.)/u)</td>      <td><div id="splitRegexDot"></div></td></tr>
  <tr><th colspan="2">Better:</th></tr>
  <tr><td>[...str]</td>                 <td><div id="spread"></div></td></tr>
  <tr><td>Array.from(str)</td>          <td><div id="arrayFrom"></div></td></tr>
  <tr><td>str.split(/(?=[\s\S])/u)</td> <td><div id="splitRegex"></div></td></tr>
  <tr><td>str.split(/(?=(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]))/)</td><td><div id="splitBabel"></div></td></tr>
</table>

La spreadsyntaxe

Vous pouvez utiliser la syntaxe répartie , un initialiseur de tableau introduit dans la norme ECMAScript 2015 (ES6) :

var arr = [...str];

Exemples

function a() {
    return arguments;
}

var str = 'Hello World';

var arr1 = [...str],
    arr2 = [...'Hello World'],
    arr3 = new Array(...str),
    arr4 = a(...str);

console.log(arr1, arr2, arr3, arr4);

Les trois premiers résultats:

["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

Le dernier se traduit par

{0: "H", 1: "e", 2: "l", 3: "l", 4: "o", 5: " ", 6: "W", 7: "o", 8: "r", 9: "l", 10: "d"}

Prise en charge du navigateur

Vérifiez le tableau de compatibilité ECMAScript ES6 .

Lectures complémentaires

• MDN: Opérateur d'étalement
• ECMAScript 2015 (ES6): 12.2.5 Initialiseur de baie

spreadest également référencé comme " splat" (par exemple en PHP ou Ruby ou " scatter" (par exemple en Python ).

Démo

Essayez avant d'acheter

Vous pouvez également utiliser Array.from.

var m = "Hello world!";
console.log(Array.from(m))

Cette méthode a été introduite dans ES6.

Référence

Array.from

C'est une vieille question mais je suis tombé sur une autre solution non encore listée.

Vous pouvez utiliser la fonction Object.assign pour obtenir la sortie souhaitée:

var output = Object.assign([], "Hello, world!");
console.log(output);
    // [ 'H', 'e', 'l', 'l', 'o', ',', ' ', 'w', 'o', 'r', 'l', 'd', '!' ]

Pas nécessairement vrai ou faux, juste une autre option.

Object.assign est bien décrit sur le site MDN.

C'est déjà:

var mystring = 'foobar';
console.log(mystring[0]); // Outputs 'f'
console.log(mystring[3]); // Outputs 'b'

Ou pour une version plus ancienne compatible avec les navigateurs, utilisez:

var mystring = 'foobar';
console.log(mystring.charAt(3)); // Outputs 'b'

Il y a (au moins) trois choses différentes que vous pourriez concevoir comme un "personnage", et par conséquent, trois catégories différentes d'approche que vous pourriez vouloir utiliser.

Division en unités de code UTF-16

Les chaînes JavaScript ont été à l'origine inventées en tant que séquences d'unités de code UTF-16, à un moment de l'histoire où il y avait une relation un à un entre les unités de code UTF-16 et les points de code Unicode. La .lengthpropriété d'une chaîne mesure sa longueur en unités de code UTF-16, et lorsque vous le faites, someString[i]vous obtenez la i ème unité de code UTF-16 de someString.

Par conséquent, vous pouvez obtenir un tableau d'unités de code UTF-16 à partir d'une chaîne en utilisant une boucle for de style C avec une variable d'index ...

const yourString = 'Hello, World!';
const charArray = [];
for (let i=0; i<=yourString.length; i++) {
    charArray.push(yourString[i]);
}
console.log(charArray);

Il existe également plusieurs méthodes rapides pour réaliser la même chose, comme l'utilisation .split()de la chaîne vide comme séparateur:

const charArray = 'Hello, World!'.split('');
console.log(charArray);

Cependant, si votre chaîne contient des points de code composés de plusieurs unités de code UTF-16, cela les divisera en unités de code individuelles, ce qui peut ne pas être ce que vous voulez. Par exemple, la chaîne '𝟘𝟙𝟚𝟛'est composée de quatre points de code Unicode (points de code 0x1D7D8 à 0x1D7DB) qui, en UTF-16, sont chacun constitués de deux unités de code UTF-16. Si nous divisons cette chaîne en utilisant les méthodes ci-dessus, nous obtiendrons un tableau de huit unités de code:

const yourString = '𝟘𝟙𝟚𝟛';
console.log('First code unit:', yourString[0]);
const charArray = yourString.split('');
console.log('charArray:', charArray);

Division en points de code Unicode

Donc, peut-être que nous voulons plutôt diviser notre chaîne en points de code Unicode! Cela a été possible depuis que ECMAScript 2015 a ajouté le concept d'un itérable au langage. Les chaînes sont désormais itérables, et lorsque vous les parcourez (par exemple avec une for...ofboucle), vous obtenez des points de code Unicode, pas des unités de code UTF-16:

const yourString = '𝟘𝟙𝟚𝟛';
const charArray = [];
for (const char of yourString) {
  charArray.push(char);
}
console.log(charArray);

Nous pouvons raccourcir cela en utilisant Array.from, qui itère sur l'itérable qu'il est passé implicitement:

const yourString = '𝟘𝟙𝟚𝟛';
const charArray = Array.from(yourString);
console.log(charArray);

Cependant, les points de code unicode ne sont pas la plus grande chose qui pourrait peut - être considéré comme un « caractère » soit . Voici quelques exemples de choses qui pourraient raisonnablement être considérées comme un seul "caractère", mais être constituées de plusieurs points de code:

• Caractères accentués, si l'accent est appliqué avec un point de code de combinaison
• Drapeaux
• Quelques emojis

Nous pouvons voir ci-dessous que si nous essayons de convertir une chaîne avec de tels caractères en un tableau via le mécanisme d'itération ci-dessus, les caractères finissent par être décomposés dans le tableau résultant. (Si aucun des caractères ne s'affiche sur votre système, yourStringci - dessous se compose d'un A majuscule avec un accent aigu, suivi du drapeau du Royaume-Uni, suivi d'une femme noire.)

const yourString = 'Á🇬🇧👩🏿';
const charArray = Array.from(yourString);
console.log(charArray);

Si nous voulons conserver chacun de ces éléments comme un seul élément dans notre tableau final, nous avons besoin d'un tableau de graphèmes , pas de points de code.

Division en graphèmes

JavaScript n'a pas de support intégré pour cela - du moins pas encore. Nous avons donc besoin d'une bibliothèque qui comprend et implémente les règles Unicode pour quelle combinaison de points de code constitue un graphème. Heureusement, il en existe un: le grapheme-splitter d' Orling . Vous voudrez l'installer avec npm ou, si vous n'utilisez pas npm, télécharger le fichier index.js et le servir avec une <script>balise. Pour cette démo, je vais le charger depuis jsDelivr.

graphème-séparateur nous donne une GraphemeSplitterclasse avec trois méthodes: splitGraphemes, iterateGraphemeset countGraphemes. Naturellement, nous voulons splitGraphemes:

const splitter = new GraphemeSplitter();
const yourString = 'Á🇬🇧👩🏿';
const charArray = splitter.splitGraphemes(yourString);
console.log(charArray);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.js"></script>

Et nous y sommes - un tableau de trois graphèmes, ce qui est probablement ce que vous vouliez.

Vous pouvez parcourir la longueur de la chaîne et pousser le caractère à chaque position :

const str = 'Hello World';

const stringToArray = (text) => {
  var chars = [];
  for (var i = 0; i < text.length; i++) {
    chars.push(text[i]);
  }
  return chars
}

console.log(stringToArray(str))

réponse simple:

let str = 'this is string, length is >26';

console.log([...str]);

Une possibilité est la suivante:

console.log([1, 2, 3].map(e => Math.random().toString(36).slice(2)).join('').split('').map(e => Math.random() > 0.5 ? e.toUpperCase() : e).join(''));

Que dis-tu de ça?

function stringToArray(string) {
  let length = string.length;
  let array = new Array(length);
  while (length--) {
    array[length] = string[length];
  }
  return array;
}

Array.prototype.slice fera également le travail.

const result = Array.prototype.slice.call("Hello world!");
console.log(result);