• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 14/08/2017

L'objet "String"

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Les chaînes de caractères, nommées String en anglais, sont elles-aussi des objets, qui sont de plus très souvent utilisés.
Découvrons sans plus tarder les nombreuses méthodes à utiliser, pour pouvoir en faire ce qu'on veut :) .

Nous les avons classé en trois parties.

  • Tout d'abord, celles permettant de traiter des caractères séparément (pour récupérer la position d'un caractère dans une chaîne, ou inversement, y lire le caractère qui a une position donnée).

  • Puis celles qui utilisent des chaînes de caractères entières (extraire une sous-chaîne, en concaténer plusieurs, etc.).

  • Enfin, des méthodes "rechercher / remplacer", qui utilisent les regex.
    Ce thème et ces méthodes feront l'objet du chapitre suivant.

Sommaire

Opérations sur les caractères
  • length : longueur de la chaîne (nombre de caractères)

  • charAt(i) : retourne le iième caractère

  • indexOf(str) : retourne la position de str dans la chaîne (-1 si elle n'est pas trouvée)

  • lastIndexOf(str) : idem, mais renvoie la position de la dernière occurrence de str

  • toLowerCase() : retourne la chaîne en minuscules

  • toUpperCase() : retourne la chaîne en majuscules

Opérations sur les chaînes
  • concat(str) : retourne la chaîne concaténée avec str

  • split(str) : retourne, sous forme de tableau, les portions de la chaînes délimitées par str

  • substring(debut,fin) : extrait une sous-chaîne, depuis la position debut (incluse) à fin (excluse).

  • substr(debut,i) : extrait une sous-chaîne, depuis la position debut, en prenant i caractères

Chaînes et expressions régulières

Ces fonctions sont détaillées dans le chapitre consacré aux expressions régulières.

  • match(regex)

  • search(regex)

  • replace(regex, str)

Opérations sur les caractères

length, le retour

Description

Notre fameuse propriété length contient la longueur de la chaîne de caractère, autrement dit, le nombre de caractères dont cette chaîne est composée.

Exemple
var chaine = "J'aime le JavaScript";
alert(chaine.length);
var longueur = "JavaScript".length;
alert(longueur);

Cet exemple affichera successivement 20 (nombre de caractères dans la phrase "J'aime le JavaScript", espaces compris) et 10 (il y a bien 10 lettres dans le mot "JavaScript").

charAt(i)

Description

La méthode charAt(i) renvoie le caractère qui se trouve à la position i de la chaîne.

Exemple

Ceci affichera la lettre S :

alert("JavaScript".charAt(4));

Voici une fonction qui sépare tous les caractères par un espace.
Pour cela, on parcourt la chaîne, et on recopie chaque caractère en ajoutant un espace.
Le test affichera : "V i v e - l e - J a v a S c r i p t ".

function separer(chaine)
{
     var sortie = '';
     for(var i=0; i<chaine.length; i++) 
          sortie += chaine.charAt(i) + ' ';
     return sortie;
}
alert(separer('Vive-le-JavaScript'));

indexOf(str) et lastIndexOf(str)

Description

Ces deux méthodes sont assez utiles.

  • indexOf(str) renvoie la position de str dans la chaîne de caractères.
    Si str apparaît plusieurs fois, c'est la position de la première occurrence qui est renvoyée.

  • lastIndexOf(str) renvoie de même la position de str.
    La différence, c'est que si str apparaît plusieurs fois, c'est cette fois ci la position de la dernière occurrence qui est renvoyée.

Exemple

On recherche "script" dans "JavaScript".
Ceci affichera Non, en raison de la majuscule !

var chaine = "JavaScript";
if(chaine.indexOf("script") == -1)
     alert("Non");
else
     alert("Oui");
Exemple : vérifier la vraisemblance d'une adresse e-mail

On s'occupe ici de la présence d'un @ et d'un point

On récupère, grâce à nos deux fonction, la position du premier @ et du dernier point.
La fonction doit renvoyer true quand le @ est après le premier caractère (le n°0), et quand le point est au moins deux caractères après le @.

L'adresse la plus courte qui est considérée comme correcte est donc : x@x.x

function verifMail(email)
{
     var position_at = email.indexOf('@');
     var position_dot = email.lastIndexOf('.');
     return (position_at > 0 && position_dot >= position_at + 2);
}
 
if(verifMail("mon.adresse@bon.net"))
     alert("On dirait une adresse valide");
else
     alert("L'adresse e-mail n'existe pas");

toLowerCase() et toUpperCase()

Description

JavaScript met à disposition deux méthodes permettant d'en changer la casse d'une chaîne de caractères :

  • toLowerCase() : renvoie toute la chaîne en minuscules

  • toUpperCase() : renvoie toute la chaîne en majuscules

Exemple

Cet exemple affichera "salut tout le monde".

var chaine = 'SaLut TouT LE mOnDe';
var chaineMin = chaine.toLowerCase();
alert(chaineMin);

Comparons maitenant deux chaînes : le message sera "Ces chaînes sont les mêmes, aux majuscules près".

var chaine1 = "JavaScript";
var chaine2 = "javascript";
if(chaine1 == chaine2)
     alert("Ces chaînes sont exactement les mêmes");
else if(chaine1.toLowerCase() == chaine2.toLowerCase())
     alert("Ces chaînes sont les mêmes, aux majuscules près");
else
     alert("Ces chaînes sont différentes");

Opérations sur les chaînes

concat(str), l'opérateur +

Description

L'opérateur + permet de concaténer deux chaînes : chaine+str est la chaîne constituée de chaine et de str mises bouts-à-bouts.

Exemple

On affiche la chaîne "JavaScript", construite par concaténation (en utilisant les deux façons de faire).

var chaine1 = 'Java';
var chaine2 = 'Script';
alert(chaine1 + chaine2);
alert(chaine1.concat(chaine2));

split(str)

Description

La méthode split(str) permet de découper une chaîne de caractères, en "coupant" aux endroit où la chaîne comporte str.
Les "morceaux" découpés sont renvoyés sous forme de tableau.

Cette méthode peut se révéler assez utile.

Exemple
var chaine = 'www.siteduzero.com';
var tableau = chaine.split('.');

Ici, la chaîne chaine est découpés selon les points.
Il y aura donc trois parties :

  • tableau[0] qui contient www

  • tableau[1] qui contient siteduzero

  • tableau[2] qui contient com

substring(debut,fin)

Description

substring(debut,fin) renvoie la portion de chaîne délimitée par les positions debut (incluse) et fin (exclue).

Si fin n'est pas précisée, la portion est extraite de debut jusqu'à la fin de la chaîne.

Exemple

Cet exemple affichera "Javascript".

var chaine = 'Vive le Javascript !';
var sousChaine = chaine.substring(8,18);
alert(sousChaine);

substr(debut,nombre)

Description

substr(debut, i) renvoie la portion de chaîne commençant à la positions debut et contenant i caractères.
Si i n'est pas précisée, ou s'il y a moins de i caractères, la portion est extraite jusqu'à la fin de la chaîne.

Exemple

Cet exemple affichera "Javascript".

var chaine = 'Vive le Javascript !';
var sousChaine = chaine.substr(8,10);
alert(sousChaine);

Rechercher et remplacer

match(regex)

match(regex) applique l'expression régulière regex à la chaîne, et renvoie le résultat sous forme de tableau.

replace(regex, str)

replace(regex, str) remplace les sous-chaînes satisfaisant l'expression régulière regex par le motif de remplacement str.

search(regex)

search(regex) renvoie la position de la première sous-chaîne satisfaisant l'expression régulière regex.
Renvoie -1 s'il n'y a aucun résultat.

Dans le prochain chapitre, nous restons dans le même sujet, mais en abordant les regex : c'est un outil vraiment puissant pour travailler sur les chaînes de caractères.

Qu'est-ce qu'on apprendra à faire grâce à ces fameuses regex ?

On peut d'ores et déjà citer la vérification d'un numéro de téléphone ou d'une adresse e-mail (plus exactement, on vérifie s'il semble valide).
Ça permet également d'extraire des informations contenues dans une phrase qu'a écrit l'utilisateur (en particulier, récupérer des chiffres, tel qu'un âge, dans une phrase comme "j'ai 99 ans").

Et vous verrez, les regex sont extrêmement pratique dans ce genre de situations.

Exemple de certificat de réussite
Exemple de certificat de réussite