Apprendre Javascript pour rendre vos pages Web interactives

Auteur: Mohamed CHINY Durée necessaire pour le cours de Apprendre Javascript pour rendre vos pages Web interactives Niveau recommandé pour le cours de Apprendre Javascript pour rendre vos pages Web interactives Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Leçon 11: Objet String: chaînes de caractères

Toutes les leçons

Apprendre Javascript pour rendre vos pages Web interactives

Leçon 1
Javascript c'est quoi?
Leçon 2
Comment intégrer du code Javascript?
Leçon 3
Pour commencer: les bases du Javascript
Leçon 4
Les bases du Javascript (La suite)
Leçon 5
Structures de contrôle (conditions et boucles)
Leçon 6
Les fonctions
Leçon 7
Les événements en Javascript
Leçon 8
Objets, méthodes et attributs
Leçon 9
Exercices - Permutation et calculatrice
Leçon 10
Objet Array: les tableaux
Leçon 11
Objet String: chaînes de caractères
Accéder au quiz
Leçon 12
Exercice - Contrôle de saisie en Javascript
Leçon 13
Objet Math
Leçon 14
Objet Date
Leçon 15
Objet RegExp: Les expressions régulières
Leçon 16
Objet window
Leçon 17
Exercice - Afficher un message lettre par lettre
Leçon 18
Objet screen
Leçon 19
Objet Document et DOM en Javascript (Partie 1)
Leçon 20
Objet Document et DOM en Javascript (Partie 2)
Leçon 21
Objet Document et DOM en Javascript (Partie 3)
Leçon 22
Objet event
Leçon 23
Gestion des exceptions
Leçon 24
Exercice - Album photo
Leçon 25
API Selectors
Leçon 26
Exercice - Réaliser un jeu de loterie avec Javascript
Leçon 27
Exercice - Réaliser un album photo à effet de vagues (ou domino)
Leçon 28
Fonctions fléchées (Arrow function)
Leçon 29
Fonctions de rappel (Callback function)
Leçon 30
Types primitifs, non primitifs et notion du prototype
Leçon 31
Objets personnalisés en Javascript
Leçon 32
Classes et héritage
Leçon 33
Les promesses - Objet Promise
Leçon 34
Gérer les promesses avec une fonction asynchrone - async et await

L'objet String

Normalement, une chaîne de caractère représente un type pour les variables. C'est le cas en Javascript mais on parle plutôt d'un objet au lieu d'une variable.

Pour déclarer un objet String nous n'avons pas vraiment besoin de faire appel au mot clé new comme on'a fait pour l'objet Array. Il suffit d'affecter la chaîne voulue à l'objet comme si on affecte une valeur à une variable.

Exemple:
str="Bonjour";
str dans ce cas n'est pas une variable proprement dit, mais il s'agit en fait d'un objet. Afin de manipuler les chaînes de caractères (objets String) nous avons à notre disposition un ensemble d'attributs et de méthodes.

Attributs et méthodes agissant sur les chaînes de caractères

Je vais essayer de lister les attributs et méthodes les plus fréquents en Javascript:
  • length: Cet attribut retourne le nombre de caractères contenus dans la chaîne. Notez que si on applique le même attribut à un tableau, il retourne la taille de celui-ci.
  • charAt(): La méthode charAt(x) (avec A majuscule) permet de retourner le caractères qui se trouve à la position x passé en paramètre. Le paramètre est un entier qui commence de 0. La valeur 0 indexe le premier caractère de la chaîne.
  • indexOf(): La méthode indexOf(car) (avec O en majuscule) permet de retourner la position du caractères car passé en paramètre. Si le caractère existe dans la chaîne, alors sa position (comprise entre 0 et la longueur de la chaîne - 1) est retournée, sinon (le caractère ne figure pas dans la chaîne) alors la valeur -1 est retournée. La méthode indexOf() peut accueillir un deuxième paramètre qui est un entier qui indique à partir de quel position de la chaîne on commencera la recherche du caractère passé en premier paramètre.
  • substring(): La méthode substring(début,fin) permet d'extraire une partie de la chaîne de caractères commençant de la position début et finissant à la position fin-1.
  • split(): La méthode split(occurence) permet de retourner un tableau à partir des fractions de la chaîne de caractères obtenues en divisant celle-ci au niveau de l'occurence.
  • toLowerCase(): La méthode toLowerCase() permet de retourner la chaîne de caractère entièrement en minuscules.
  • toUpperCase(): La méthode toUpperCase() permet de retourner la chaîne de caractère entièrement en majuscules.

Pour mieux comprendre comment ces attributs et méthodes se comportent-ils voici un exemple:
str="Bonjour";
str.length;
/* Retourne 7 */

str.charAt(0);
/* Retourne B */

str.indexOf("o");
/* Retourne 1 */

str.indexOf("o",2);
/* Retourne 4 */

str.indexOf("x");
/* Retourne -1 */

str.substring(0,3);
/* Retourne Bon */

str.substring(3,6);
/* Retourne jou */

tab=str.split("o");

tab.length;
/*Retourne 3 */

tab.join("-");
/*Retourne B-nj-ur */
J'aimerais expliquer plus en détail le dernier bout de code où j'ai fait appel au tableau tab. En fait, str.split("o") découpe la chaîne de caractères au niveau des lettres "o". Puisqu'il y'en a deux dans "Bonjour", alors on obtient trois fragments"B", "nj" et "ur". Chaque portions constitue une entrée du tableau tab (tab[0]="B", tab[1]="nj" et tab[2]="ur").

Vous avez donc compris que la méthode join() qui s'applique aux tableaux et la méthode split() qui s'appliquent aux chaînes de caractères sont complémentaire. Par conséquent si on avait déclaré tab.join("o") à la place de la dernière instruction du code, on aurait obtenu "Bonjour".

Les chaînes de caractères en Javascript (objet String) en vidéo



Leçon 6
Les fonctions
Leçon 11
Objet String: chaînes de caractères
Accéder au quiz
Leçon 13
Objet Math
Leçon 14
Objet Date
Leçon 16
Objet window
Leçon 18
Objet screen
Leçon 22
Objet event
Leçon 25
API Selectors
Quiz (Pour tester vos connaissances)
  1. Quand la méthode str.indexOf("b",3) retourne -1, cela veut dire:
La chaîne de caractères str ne contient aucune lettre b.
La chaîne de caractères str ne contient aucune lettre b à partir de son troisième caractère.
La chaîne de caractères str ne contient aucune lettre b à partir de son quatrième caractère.
  1. Que fait la fonction suivante:
    function f(chaine){
       a=chaine.charAt(0);
       b=chaine.substring(1,chaine.length);
       return a.toUpperCase()+b.toLowerCase();
    }
Convertit la chaîne de caractère passée en paramètre en majuscule.
Convertit la chaîne de caractère passée en paramètre en minuscule.
Convertit le premier caractère la chaîne passée en paramètre en majuscule et le reste des caractères en minuscule.
  1. Que fait le code suivant?
    str="Objet String";
    alert(str.split(" ").join("-"));
Affiche la chaîne "-Objet-String-"
Affiche la chaîne "Objet-String"
  1. Que fait le code suivant?
    str="Objet String";
    alert(str.substring(0,str.length));
Affiche la chaîne "Objet String"
Affiche la chaîne "Objet Strin"
Affiche le caractère "O"