Comment diviser une chaîne en sous-chaînes en JavaScript

Dans ce didacticiel, vous apprendrez les différentes manières de diviser une chaîne en sous-chaînes et à quel moment chaque méthode est utile.

Les chaînes peuvent être facilement manipulées en JavaScript à des fins différentes – en utilisant des méthodes natives disponibles dans le langage. Nous avons récemment couvert comment convertir un nombre en chaîne et comment convertir une chaîne en nombre en JavaScript.

Une autre façon de manipuler une chaîne consiste à en extraire des parties pour les utiliser pour autre chose. Par exemple, vous pouvez avoir une URL complète mais vouloir extraire uniquement la partie de hachage. Ou vous pouvez avoir une liste d’éléments séparés par des virgules et vouloir utiliser chacun de ces éléments séparément.

Diviser une chaîne en sous-chaînes à l’aide de substring ()

Toutes les chaînes en JavaScript ont un substring() méthode. Cette méthode peut être utilisée pour récupérer une sous-chaîne à des indices spécifiques.

substring() accepte deux paramètres. Le premier est obligatoire et indique l’index auquel la sous-chaîne commence. La seconde est facultative et indique l’index auquel la sous-chaîne se termine. Si le deuxième paramètre est omis, la sous-chaîne commencera à l’index fourni comme premier paramètre et continuera jusqu’à la fin de la chaîne.

Il est important de noter que le premier paramètre est un index basé sur 0, ce qui signifie que le premier caractère est à l’index 0le second est à l’index 1, etc. Une autre chose importante à noter est que le deuxième paramètre est supérieur d’un indice à l’index auquel vous voulez que la sous-chaîne se termine. Par exemple, si vous voulez que la chaîne se termine à l’index 12vous fournissez 13 pour le deuxième paramètre.

Par exemple:

const a = 'Bytes and bits';
const b = a.substring(10, 13);
console.log(b); 
console.log(a); 

Dans cet exemple, substring() est utilisé sur la variable a pour récupérer une sous-chaîne. La sous-chaîne commence à l’index 10 et se termine à l’index 13. La valeur renvoyée est bit. Remarquerez que substring() renvoie la sous-chaîne sans muter la valeur de la variable sur laquelle elle est utilisée.

Voir le stylo
Utiliser une sous-chaîne pour diviser une chaîne par SitePoint (@SitePoint)
sur CodePen.

Récupération d’indices

Dans la plupart des cas, vous ne connaîtrez pas les indices de début ou de fin de la sous-chaîne lors de l’écriture du code. L’indice pourrait être basé sur d’autres entrées ou variables.

Dans ces cas, vous pouvez utiliser le indexOf() méthode. Cette méthode renvoie l’index d’une sous-chaîne dans une chaîne si elle s’y trouve. Si la sous-chaîne n’existe pas dans la chaîne, elle renvoie -1.

Une fois que vous avez récupéré l’index à l’aide de indexOf()vous pouvez récupérer la sous-chaîne.

Par exemple:

const url = 'https://sitepoint.com#chapter_1';
const hash = url.indexOf('#');
if (hash !== -1) {
  console.log(url.substring(hash)); 
}

Dans cet exemple, vous récupérez l’index du caractère dièse # dans la variable url. Si la valeur de l’indice n’est pas -1vous récupérez la sous-chaîne de url à partir de l’index du hachage.

Vous pouvez l’essayer dans la démo CodePen suivante.

Voir le stylo
Utilisation de la sous-chaîne avec indexOf pour diviser la chaîne par SitePoint (@SitePoint)
sur CodePen.

Diviser une chaîne en sous-chaînes à l’aide de split ()

Un autre moyen utile de récupérer une sous-chaîne à partir d’une chaîne est le split() méthode. Si votre chaîne est une liste d’éléments séparés par un délimiteur, vous pouvez utiliser le split() méthode pour diviser la chaîne en un tableau de sous-chaînes en fonction du délimiteur.

split() accepte deux paramètres optionnels. Le premier paramètre est le délimiteur qui doit être utilisé pour déterminer comment la chaîne est fractionnée. Si aucun n’est fourni, un tableau est renvoyé avec un élément qui est la chaîne dans son ensemble.

Le deuxième paramètre est un nombre qui limite le nombre de sous-chaînes renvoyées dans le tableau. Si fourni, la chaîne est divisée sur le délimiteur jusqu’à ce que la limite soit atteinte, et le reste du texte de la chaîne sera omis du tableau.

Par exemple:

const str = 'Toyota,Nissan,Mercedes,Tesla';
const cars = str.split(',');
console.log(cars); 

Dans cet exemple, split() est utilisé sur une chaîne qui contient une liste de noms de marques de voitures séparés par le , délimiteur. Le tableau renvoyé contient chaque nom de marque de voiture en tant qu’élément du tableau.

Notez que split() renvoie le tableau de sous-chaînes sans affecter la valeur de la chaîne sur laquelle il est utilisé.

L’exemple en direct suivant montre comment une chaîne séparée par des virgules peut être divisée en éléments de liste.

Voir le stylo
Utilisation de split pour obtenir des sous-chaînes par SitePoint (@SitePoint)
sur CodePen.

Conclusion

Dans ce didacticiel, vous avez appris à diviser une chaîne en sous-chaînes à l’aide des méthodes substring() et split().

substring() est utile lorsque vous souhaitez récupérer une seule sous-chaîne à partir d’une chaîne à un index spécifique. Vous pouvez l’utiliser avec indexOf() pour récupérer l’index de début ou de fin de la sous-chaîne.

split(), en revanche, est utile lorsque vous avez une chaîne contenant une liste d’éléments séparés par un délimiteur, tel qu’une virgule. Vous pouvez ensuite diviser la chaîne en un tableau de sous-chaînes en utilisant split().

Si vous avez trouvé cet article utile, vous pouvez également profiter de ce qui suit :