Retourner à la page d'accueil de TJS

Les chaînes de caractères en JavaScript

Tous les langages de programmation prévoient une gestion des chaînes de caractères. JavaScript est particulièrement adapté pour le traitement des chaînes.

L'objet String contient de nombreuses méthodes permettant de manipuler les chaînes.

La déclaration des chaînes

La déclaration

Pour déclarer une chaîne de caractères, vous pouvez utiliser les séparateurs guillemets (") ou apostrophe (').
var chaine1="Bonjour";
var chaine2='Bonjour';
console.log(chaine1);
console.log(chaine2);

Ici, les 2 variables sont des chaînes de caractères et contiennent toutes les 2 Bonjour.

Notez dans l'émulateur de la console que Bonjour est écrit en violet signalant un type String.


Emulation de la console

Cela se corse quand il s'agit d'initialiser une chaîne avec un de ces caractères :

var chaine1="Bonjour l'ami";
var chaine2='Je vous dis "Bonjour"';
Le secret est d'alterner les guillemets et les apostrophes selon les caractères spéciaux à afficher.

Il faut veillez à ne pas fermer la chaîne de caractères avant sa fin normale pour éviter les erreurs JavaScript. Exemple de déclaration incorrecte :
var chaine1="Je vous dis "Bonjour"";
                      // ^ ici, le " indique la fin de chaîne
Il existe aussi une autre solution, l'anti-slash ou caractère d'échappement :
var chaine1="Je lui dis \"Bonjour l'ami\"";
La variable chaine1 contient Je lui dis "Bonjour l'ami". Grâce au caractère \, appelé caractère d'échappement, JavaScript a interprété \" comme un guillemet.

Les types de variables JavaScript

Les variables JavaScript ne sont pas typées, c'est-à-dire qu'elles n'ont pas de type prédéfini (entier, chaîne, ...) comme dans les autres langages. C'est le navigateur qui interprète dynamiquement le type le plus approprié. Par exemple :
var chaine="azerty";
var pi=3.14159;
La variable chaine est initialisée avec une chaîne de caractères.
La variable pi est initialisée avec un nombre.

Une variable peut être transformée en une chaîne de caractères à tout moment. Il est possible de modifier dynamiquement le type de la variable :
var chaine="azerty";
var pi=3.14159;
chaine=pi;
pi=pi+"2654";
document.write("pi est de type "+ typeof pi +  "  et contient " + pi );

A la fin de ce script, chaine est un nombre qui vaut 3.14159 ;
pi est une chaîne qui contient "3.14152654".


Emulation de la console
typeof retourne une chaîne contenant le type de variable. Ici, pi est bien une String.

La différence peut sembler sans importance. Il n'en est rien. Quand une variable est un nombre, il est possible de lui appliquer des opérations (addition, multiplication, ...). Quand une variable est de type chaîne de caractères, on peut lui appliquer les méthodes propres aux objets chaînes.
JavaScript n'est pas exigeant sur le type des variables, mais si vous essayez d'appliquer une méthode de traitement des chaînes à un nombre, ou inversement, vous risquez une errreur d'exécution, ou pire un mauvais résultat.

Les opérations sur les chaînes

La concaténation

L'opération de base est la concaténation de chaînes. Elle consiste à assembler deux chaînes en une seule. L'opérateur est le +, à ne pas confondre avec l'opérateur addition qui s'applique aux nombres.
var chaine1="Vive le ";
var chaine2="JavaScript";
var chaine=chaine1+chaine2;
document.write(chaine);

La variable chaine contient après ce script "Vive le JavaScript".

Emulation de la console

La longueur d'une chaîne

Une chaîne de caractères en JavaScript est un objet string sur lequel s'appliquent des propriétés et des méthodes. (Voir la page JavaScript, langage Objet pour plus d'informations)
La propriété length indique le nombre de caractères de la chaîne.
Pour une chaîne définie par var chaine="azerty";, chaine.length retourne le nombre de caractères, ici 6 caractères.

Récupérer le nième caractère

La méthode charAt(n) récupère le nième caractère . Attention, le premier caractère a comme indice 0.
Pour une chaîne initialisée par var chaine="azerty", chaine.charAt(1) retourne "z".

Extraire une sous-chaîne

Il est utile de pouvoir extraire un morceau d'une chaîne. Par exemple, déclarons la variable date="15/08/2017". La question est de récupérer le jour, le mois et l'année dans 3 variables différentes.

var date  = "15/08/2017";
var jour  = date.substring(0,2);
var mois  = date.substring(3,5);
var annee = date.substring(6,10);
console.log(jour);
console.log(mois);
console.log(annee);

Après ce script, jour vaut 15, mois vaut 08 et annee vaut 2017.
Notez que les 3 variables sont encore des String.


Emulation de la console
La méthode substring() attend 2 paramètres :
 - l'indice du premier caractère (inclus),
 - l'indice du dernier caractère (exclus).
Si les deux paramètres sont inversés, JavaScript rétablit l'ordre logique :
  chaine.substring(6,10) et chaine.substring(10,6) auront le même effet.
Si le deuxième paramètre est omis, la chaine retournée commence à l'indice indiqué et se termine à la fin de la chaîne.

Retrouver une sous-chaîne dans une chaîne

Deux méthodes permettent de retrouver une sous-chaîne d'une chaîne. Ces méthodes retrouvent la position d'une chaîne et retourne son indice.

Par exemple, vous avez dans une variable JavaScript un nom de domaine et vous souhaitez retrouver l'extension :

var domaine="www.toutjavascript.com";
var extension=domaine.substring(domaine.lastIndexOf("."));
document.write(extension);

La méthode lastIndexOf(souschaine) retourne l'indice de la dernière occurrence de souschaine.
Si la sous-chaîne n'est pas trouvée, lastIndexOf() retourne -1.

Emulation de la console

Retrouver une sous-chaîne dans une chaîne, le retour

Il existe une autre méthode très proche indexOf(souschaine, debut) qui retourne l'indice de la première occurrence de souschaine trouvée à partir du caractère debut.
Cette méthode permet par exemple d'extraire le domaine d'une url complète :
var url="http://www.toutjavascript.com/reference/";
var domaine=url.substring(7,url.indexOf("/",7));
document.write(domaine);

La variable domaine contient dans cet exemple www.toutjavaScript.com qui est une sous-chaine de url qui commence au caractère 7 et qui se termine au premier slash (/) après "http://".


Emulation de la console

MAJUSCULES / minuscules

JavaScript offre deux méthodes pour transformer les lettres (et uniquement les lettres) d'un mot en majuscules ou en minuscules.

var chaine="Ceci est un TEXTE";
var maj=chaine.toUpperCase();
var min=chaine.toLowerCase();
document.write(chaine + "<br>");
document.write(maj + "<br>");
document.write(min + "<br>");

A la fin de ce script, toUpperCase() a transformé la chaîne en majuscule et toLowerCase() en minuscule.


Emulation de la console

On peut penser que ces traitements sont superflus. Ils permettent en fait de rendre plus homogène une saisie.
Imaginez que vos visiteurs remplissent un formulaire avec leurs coordonnées postales, certains mettront sans doute leur nom sans majuscule, le pays en minuscules... Grâce à ces méthodes, vous pourrez corriger leur saisie et avoir un fichier client homogène. Un exemple complet est traité dans le paragraphe suivant.

Quelques exemples utiles

Ce paragraphe présente des applications concrètes du traitement des chaînes de caractères.

Vérifier qu'un mail est valide

Pour vérifier qu'un mail est valide, il suffit de tester la présence de @ et du point.

function verifierMail(mail) {
  if ((mail.indexOf("@")>=0)&&(mail.indexOf(".")>=0)) {
    console.log(mail + " semble valide");
    return true;
  } else {
    console.log(mail + " n'est pas valide");
    alert("Mail invalide !");
    return false;
  }
}

Cette fonction vérifie la présence du caractère @ et du . pour vérifier la validité. Si ces 2 caractères sont trouvés, la fonction retourne true sinon, elle affiche un message et retourne false.

<form>
  Entrez une adresse mail : 
  <input type="texte" name="mail" value="adresse mail">
  <input type="button" value="Vérifier le mail" onClick="verifierMail(this.form.mail.value)">
</form>

Ce qui donne :


Emulation de la console

Les noms propres

Voici une fonction qui ajoute une majuscule à la première lettre d'un mot.
Par exemple pierre, Pierre ou PIERRE deviennent Pierre.

function nomPropre(mot) {
  var m=mot.charAt(0).toUpperCase() + mot.substring(1).toLowerCase();
  console.log(m);
  return m;
}
Dans cette fonction, on récupère le premier caractère pour le mettre en majuscule et on lui ajoute le reste du mot forcé en minuscules.

<form>
	Essayez grâce à ce formulaire : 
	<input type="text" name="mot" value="pierre" size=15>
	<input type="button" value="Nom Propre" onClick="nomPropre(this.form.mot.value)">
</form>

Ce qui donne :


Emulation de la console

Remplacer toutes les occurrences d'une sous-chaîne

Cette fonction recherche dans une chaîne expr toutes les occurrences d'une sous-chaîne a et les remplace par une sous-chaîne b.

function Remplace(expr,a,b) {
  var i=0
  while (i!=-1) {
    i=expr.indexOf(a,i);
    if (i>=0) {
      expr=expr.substring(0,i)+b+expr.substring(i+a.length);
      i+=b.length;
    }
  }
  return expr;
}
var chaine="Toutjs, du js à gogo";
document.write(Remplace(chaine, "js", "JavaScript"));

Ici, on remplace "js" par "JavaScript" dans chaine


Emulation de la console

Continuer la lecture

Les fonctions mathématiques en JavaScript

JavaScript et les Expressions Régulières

Tutoriel écrit par webmaster mis à jour le

Chercher une fonction, un objet, ...

Le 18/11/2017 12:59:52 sur php7 en 13.88 ms