web-dev-qa-db-fra.com

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

Comment obtenir une chaîne de caractères dans 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','!']

javascriptarraysstringcharacter-arrays
316
DarkLightA

Remarque: Ceci n'est pas compatible Unicode. "I????U".split('') donne le tableau de 4 caractères ["I", "�", "�", "u"] qui peut entraîner des bugs dangereux. Voir les réponses ci-dessous pour des alternatives sûres.

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

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

Voir le String.prototype.split() MDN docs .

448
meder omuraliev

Depuis que cette question a été posée à l'origine il y a plus de cinq ans, des personnes continuent à mal exécuter ce type de tâche. Comme suggère hippietrail , réponse du médecin peut rompre les paires de substitution et interpréter de manière erronée les "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-operator ( déjà répond par insertusernamehere)

> [...'????????????????']
[ '????', '????', '????', '????' ]

Array.from

> Array.from('????????????????')
[ '????', '????', '????', '????' ]

RegExp u flag

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

Utilisez /(?=[\s\S])/u au lieu de /(?=.)/u car . ne correspond pas aux nouvelles lignes .

Si vous êtes toujours dans l'ère ES5.1 (ou si votre navigateur ne gère pas cette regex correctement - comme Edge), vous pouvez utiliser cette alternative (transpilé 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 mères porteuses faibles sans égal.

Tout tester 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>
228
hakatashi

La syntaxe spread

Vous pouvez utiliser le syntaxe de propagation , un initialiseur de tableaux introduit dans 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 en:

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

Le dernier résulte en

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

Support du navigateur

Vérifiez le tableau de compatibilité ECMAScript ES6 .

Autres lectures

spread est également référencé comme "splat" (par exemple dans PHP ou Ruby ou comme "scatter" ( par exemple dans Python ).

Démo

Essayez avant d'acheter

59
insertusernamehere

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'
10
dansimau

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

9
Rajesh

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

Vous pouvez utiliser la fonction Object.assign pour obtenir le résultat souhaité:

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

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

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

5
David Thomas

Vous pouvez parcourir la longueur de la chaîne et appuyer sur 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))
3
Mohit Rathore

réponse simple:

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

console.log([...str]);
1
ajit kumar

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;
}
0
msand

Array Map est également une bonne option

const name = "Hello World !"
const map = Array.prototype.map
const arr = map.call(name, single => {
    return `${single}`
})

console.log(arr)
0
Shubh