Créer des bords arrondis, ajouter une ombre aux boîtes et utiliser une image comme une bordure et sans l'aide d'un programme de conception, comme Photoshop.
L'objet String (chaîne de caractères) est employé pour manipuler un texte ou une partie d’un texte
Une chaîne de caractères est une séquence de lettres, de chiffres, de caractères spéciaux et de valeurs arithmétiques ou une combinaison de tous ces éléments. Les chaînes de caractères peuvent être créées en plaçant le littéral de la chaîne (c'est-à-dire les caractères de la chaîne) entre des guillemets simples (') ou doubles (")
En Javascript l'objet String ou chaîne caractères est employé pour manipuler un texte ou une partie d’un texte.
L'objet JavaScript String est un objet global integré qui est utilisé pour stocker des chaînes de caractères.
Exemples d'utilisation :
L'exemple suivant emploie la propriété length de l'objet String (chaîne caractères) pour trouver la longueur d'une chaîne de caractères :
var txt="Bonjour le monde!";
document.write(txt.length);
Le résultat de l'exemple ci-dessus est : 17
L'exemple suivant emploie la méthode toUpperCase () d'objet String (chaîne caractères) pour convertir une chaîne de caractères en lettres majuscules :
var txt="Bonjour le monde !";
document.write(txt.toUpperCase());
Le résultat est : BONJOUR LE MONDE !
Le tableau suivant répertorie les propriétés standard de l'objet String.
| Propriété | Description |
|---|---|
| length | Renvoie la longueur d'une chaîne. |
| prototype | Permet d'ajouter de nouvelles propriétés et méthodes à un objet String. |
La propriété prototype permet d'ajouter une nouvelle propriété à tout objet d'un type donné :
Exemple
Code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>www.oujood.com JavaScript la propriété prototype de l'objet string </title>
</head>
<body>
<h1>Objets de JavaScript</h1>
<h2>La propriété prototype</h2>
<p id="demo"></p>
<script>
/* On définit un objet personne avec les propriétés firstName , lastName et eyeColor */
function Personne( premier, dernier, yeux) {
this.firstName = premier ;
this.lastName = dernier ;
this.eyeColor = yeux ;
}
/* On crée un nouveau objet maMère */
const maMère = new Personne("Sally", "Rallye", "vert") ;
/* On ajoute la propriété nationalité à l’objet personne à l’aide de la propriété prototype */
Personne.prototype.nationalité = "française" ;
/*Utilisation: Affichage de différentes propriétés */
document.getElementById("demo").innerHTML =
" Ma mère est de nationalité : " + maMère.nationalité + "<br>" +"son nom est "+maMère.firstName+ " elle a les yeux "+maMère.eyeColor;
</script>
</body>
</html>
Le tableau suivant répertorie les méthodes standard de l'objet String.
| Méthode | Description |
|---|---|
| charAt() | Renvoie le caractère à l'indice spécifié. |
| charCodeAt() | Retourne le code Unicode du caractère à l'indice spécifié. |
| concat() | Assemble deux ou plusieurs chaînes de caractères et renvoie une nouvelle chaîne. |
| endsWith() | Vérifie si une chaîne se termine par une sous-chaîne spécifiée. |
| fromCharCode() | Convertit les valeurs Unicode en caractères. |
| includes() | Vérifie si une chaîne contient la sous-chaîne spécifiée. |
| indexOf() | Retourne l'index de la première occurrence de la valeur spécifiée dans une chaîne. |
| lastIndexOf() | Retourne l'index de la dernière occurrence de la valeur spécifiée dans une chaîne de caractères. |
| localeCompare() | Compare deux chaînes de caractères dans la locale courante. |
| match() | Compare une chaîne de caractères à une expression régulière, et renvoie un tableau de toutes les correspondances. |
| repeat() | Retourne une nouvelle chaîne de caractères contenant le nombre spécifié de copies de la chaîne originale. |
| replace() | Remplace les occurrences d'une chaîne ou d'un modèle dans une chaîne par une autre chaîne, et renvoie une nouvelle chaîne sans modifier la chaîne d'origine. |
| search() | Recherche une chaîne de caractères par rapport à une expression régulière, et renvoie l'index de la première correspondance. |
| slice() | Extrait une partie d'une chaîne de caractères et la renvoie sous la forme d'une nouvelle chaîne. |
| split() | Divise une chaîne de caractères en un tableau de sous-chaînes. |
| startsWith() | Vérifie si une chaîne de caractères commence par une sous-chaîne spécifiée. |
| substr() | Extrait la partie d'une chaîne comprise entre l'indice de départ et un certain nombre de caractères après celui-ci. |
| substring() | Extrait la partie d'une chaîne de caractères comprise entre l'index de début et l'index de fin. |
| toLocaleLowerCase() | Convertit une chaîne de caractères en lettres minuscules, selon les paramètres régionaux actuels de la machine hôte. |
| toLocaleUpperCase() | Convertit une chaîne en majuscules, selon les paramètres régionaux actuels de la machine hôte. |
| toLowerCase() | Convertit une chaîne en lettres minuscules. |
| toString() | Retourne une chaîne représentant l'objet spécifié. |
| toUpperCase() | Convertit une chaîne de caractères en lettres majuscules. |
| trim() | Supprime les espaces aux deux extrémités d'une chaîne. |
| valueOf() | Retourne la valeur primitive d'un objet String. |
Les chaînes de caractères peuvent être créées en plaçant le littéral de la chaîne (c'est-à-dire les caractères de la chaîne) entre des guillemets simples (') ou doubles ("), comme le montre l'exemple ci-dessous :
var myString = 'Bonjour le monde!' ; // Chaîne entre guillemets simple
var myString = " Bonjour le monde ! " ; // Chaîne entre guillemets double
Vous pouvez utiliser des guillemets à l'intérieur d'une chaîne, à condition qu'ils ne correspondent pas aux guillemets qui entourent la chaîne :
var str1 = "C'est bon" ;
var str2 = "Ici ceci est "mauvais"" //ici n'est pas bon à éviter;
var str3 = "Elle a répondu 'Calmez-vous, s'il vous plaît'" ;
var str4 = "Salut, toi !' ; // Erreur de syntaxe - les guillemets doivent correspondre.
Cependant, vous pouvez toujours utiliser des guillemets simples à l'intérieur d'une chaîne de caractères entre guillemets simples ou des guillemets doubles à l'intérieur d'une chaîne de caractères entre guillemets doubles en échappant les guillemets avec un caractère antislash (\), comme ceci :
var str1 = 'C'est bon' ;
var str2 = "Il a dit \"Au revoir\"" ;
var str3 = 'Elle a répondu : \'Calme-toi, s\'il te plaît\'' ;
La barre oblique inverse (\) est appelée caractère d'échappement, tandis que les séquences \' et \" que nous avons utilisées dans l'exemple ci-dessus sont appelées séquences d'échappement.
Les séquences d'échappement sont également utiles dans les situations où vous souhaitez utiliser des caractères qui ne peuvent pas être saisis au clavier. Voici quelques autres séquences d'échappement les plus couramment utilisées.
\n est remplacé par le caractère de nouvelle ligne
\t est remplacé par le caractère de tabulation
\r est remplacé par le caractère carriage-return (retour chariot)
\b est remplacé par le caractère d'espacement arrière (backspace)
\\N est remplacé par une simple barre oblique inversée (\N).
Voici un exemple pour clarifier le fonctionnement des séquences d'échappement :
Code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Séquences d'échappement JavaScript</title>
</head>
<body>
<script>
// Création de variables
var str1 = " Le renard brun et rapide \n Attrape un lapin " ;
document.write("<pre>" + str1 + "</pre>"); // Créeer un saut de ligne
var str2 = "C:\Users\Downloads";
document.write(str2 + "<br>"); // Affiche C:UsersDownloads
var str3 = "C:\\Users\\Downloads";
document.write(str3); // Affiche C:\Users\Downloads
</script>
</body>
</html>
La propriété length renvoie la longueur de la chaîne, c'est-à-dire le nombre de caractères contenus dans la chaîne. Cela inclut également le nombre de caractères spéciaux, tels que \t ou \n.
Code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Obtenir la longueur d'une chaîne en JavaScript</title>
</head>
<body>
<script>
var str1 = " Ceci est un paragraphe de texte " ;
document.write(str1.length + "<br>"); // Affiche 33
var str2 = " Ceci est un \n paragraphe de texte " ;
document.write(str2.length); // Affiche 36, car \n n'est qu'un seul caractère.
</script>
</body>
</html>
Des exemples :
Voici des exemples à tester pour voir comment on peut manipuler les chaînes de caractères
Exemple pour manipuler les styles
Exemple : Copier le code
<html>
<head>
</head>
<body>
<script type="text/javascript">
var txt = "Bonjour le monde!";
document.write("<table><tr><td>style</td><td>Résultat</td></tr>");
document.write("<tr><td>Big: </td><td>" + txt.big() + "</td></tr>");
document.write("<tr><td>Small: </td><td>" + txt.small() + "</td></tr>");
document.write("<tr><td>Bold: </td><td>" + txt.bold() + "</td></tr>");
document.write("<tr><td>Italic: </td><td>" + txt.italics() + "</td></tr>");
document.write("<tr><td>Fixed: </td><td>" + txt.fixed() + "</td></tr>");
document.write("<tr><td>Strike: </td><td>" + txt.strike() + "</td></tr>");
document.write("<tr><td>Fontcolor: </td><td>" + txt.fontcolor("red") + "</td></tr>");
document.write("<tr><td>Fontsize: </td><td>" + txt.fontsize(7) + "</td></tr>");
document.write("<tr><td>Subscript: </td><td>" + txt.sub() + "</td></tr>");
document.write("<tr><td>Superscript: </td><td>" + txt.sup() + "</td></tr>");
document.write("<tr><td>Link: </td><td>" + txt.link("http://www.www.oujood.com") + "</td></tr>");
document.write("<tr><td>Blink: </td><td>" + txt.blink() + " (Ne fonctione pas sur: IE, Chrome, ou Safari)</td></tr>");
document.write("</table>");
</script>
</body>
</html>
Exemple pour renvoyer la position de la première occurrence trouvé d'une valeur spécifique dans une chaîne
Exemple : Copier le code
<html>
<head>
</head>
<body>
<script type="text/javascript">
/*Comment renvoyer la position de la première occurrence trouvé
d'une valeur spécifique dans une chaîne.*/
var text="Bonjour le monde!";
//renvoyer la position de la première "r" trouvé dans la chaîne text.
document.write(text.indexOf("r") + "<br />");
//renvoyer la position de la première "Monde" trouvé dans la chaîne text.
document.write(text.indexOf("Monde") + "<br />");
//renvoyer la position de la première "monde" trouvé dans la chaîne text.
document.write(text.indexOf("monde"));
</script>
<p>Une valeur négative veut dire pas d'occurrence trouvée dans la chaîne </p>
</body>
</html>
Exemple pour remplacer une valeur spécifique par une autre valeur dans une chaîne
Exemple : Copier le code
<html>
<head>
</head>
<body>
<script type="text/javascript">
var text="Visitez le site !";
document.write(text.replace("le site","le site https://www.oujood.com"));
</script>
</body>
</html>
Exemple Comment rechercher une valeur spécifique dans une chaîne.
Exemple : Copier le code
<html>
<head>
</head>
<body>
<script type="text/javascript">
var text="Bonjour le monde!";
document.write(text.match("monde") + "<br />");
document.write(text.match("monde!") + "<br />");
document.write(text.match("Monde") + "<br />");
document.write(text.match("visiteur"));
</script>
</body>
</html>
Exemple Comment convertir une chaîne en lettres minuscules ou majuscules.
Exemple : Copier le code
<html> <head> </head> <body> <script type="text/javascript"> var txt="Bonjour le monde!"; document.write(txt.toLowerCase() + "<br />"); document.write(txt.toUpperCase()); </script> </body> </html>