1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
|
---
title: Gérer du texte — les chaînes de caractères en JavaScript
slug: Learn/JavaScript/First_steps/Strings
translation_of: Learn/JavaScript/First_steps/Strings
---
{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}
Concentrons-nous maintenant sur les chaînes de caractères - c'est le nom donné à un segment de texte en programmation. Dans cet article, nous aborderons les aspects les plus communs des chaînes de caractères que vous devez vraiment connaître quand vous apprenez JavaScript, comme créer une chaîne de caractères, échapper des guillemets dans une chaîne ou encore concaténer des chaînes.
<table class="standard-table">
<tbody>
<tr>
<th scope="row">Prérequis :</th>
<td>
Connaissance de base en informatique, une compréhension basique de HTML
et CSS et savoir ce qu'est JavaScript.
</td>
</tr>
<tr>
<th scope="row">Objectif :</th>
<td>
Devenir familier avec les fondamentaux pour manipuler les chaînes de
caractères en JavaScript.
</td>
</tr>
</tbody>
</table>
## Le pouvoir des mots
Les mots ont beaucoup d'importance pour les humains — ils occupent une large part dans nos façons de communiquer. Comme le Web est un medium essentiellement fondé sur du texte conçu pour permettre aux hommes de communiquer et partager de l'information, il est utile de contrôler les mots qui y sont publiés. {{glossary("HTML")}} donne structure et sens au texte, {{glossary("CSS")}} en gère le style et JavaScript comporte une série de fonctionnalités pour manipuler les chaînes de caractères, créer des messages d'accueil personnalisés, afficher la bonne étiquette quand nécessaire, trier des termes dans l'ordre voulu, et bien d'autres choses encore.
À peu près tous les programmes que nous vous avons montrés jusqu'ici ont impliqué des manipulations de chaînes de caractères.
## Chaînes de caractères — les bases
À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez [l'ouvrir](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparée, ou bien utiliser celle de [l'explorateur, ](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools)comme vous préférez).
```html hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript console</title>
<style>
* {
box-sizing: border-box;
}
html {
background-color: #0C323D;
color: #809089;
font-family: monospace;
}
body {
max-width: 700px;
}
p {
margin: 0;
width: 1%;
padding: 0 1%;
font-size: 16px;
line-height: 1.5;
float: left;
}
.input p {
margin-right: 1%;
}
.output p {
width: 100%;
}
.input input {
width: 96%;
float: left;
border: none;
font-size: 16px;
line-height: 1.5;
font-family: monospace;
padding: 0;
background: #0C323D;
color: #809089;
}
div {
clear: both;
}
</style>
</head>
<body>
</body>
<script>
let geval = eval;
function createInput() {
let inputDiv = document.createElement('div');
let inputPara = document.createElement('p');
let inputForm = document.createElement('input');
inputDiv.setAttribute('class','input');
inputPara.textContent = '>';
inputDiv.appendChild(inputPara);
inputDiv.appendChild(inputForm);
document.body.appendChild(inputDiv);
if(document.querySelectorAll('div').length > 1) {
inputForm.focus();
}
inputForm.addEventListener('change', executeCode);
}
function executeCode(e) {
try {
let result = geval(e.target.value);
} catch(e) {
let result = 'error — ' + e.message;
}
let outputDiv = document.createElement('div');
let outputPara = document.createElement('p');
outputDiv.setAttribute('class','output');
outputPara.textContent = 'Result: ' + result;
outputDiv.appendChild(outputPara);
document.body.appendChild(outputDiv);
e.target.disabled = true;
e.target.parentNode.style.opacity = '0.5';
createInput()
}
createInput();
</script>
</html>
```
{{ EmbedLiveSample('Chaînes_de_caractères_—_les_bases', '100%', 300) }}
### Créer une chaîne de texte
1. Pour débuter, entrez les lignes suivantes :
```js
let string = 'La révolution ne sera pas télévisée.';
string;
```
Comme nous l'avons fait avec les nombres, nous déclarons une variable, l'initialisons avec une valeur de chaîne, puis renvoyons la valeur. La seule différence ici est que lorsque nous écrivons une chaîne, nous la mettons entre guillemets.
2. Si vous ne le faites pas, ou si vous oubliez un des guillemets, vous déclenchez une erreur. Essayez d'entrer une de ces lignes :
```js example-bad
let badString = Voici un test;
let badString = 'Voici un test;
let badString = Voici un test';
```
Ces lignes de code ne fonctionnent pas parce que toute chaîne de texte qui n'est pas écrite entre guillemets est considérée comme un nom de variable, un nom de propriété, un mot réservé ou quelque chose de semblable. Quand l'interpréteur ne parvient pas à trouver la déclaration de ladite variable, une erreur est déclenchée (par ex. « missing ; before statement »). Si l'interpréteur voit le début d'une chaîne mais ne trouve pas sa fin, comme dans la ligne 2, il se plaint en émettant une erreur (avec « *unterminated string literal* »). Si votre programme produit de telles erreurs, revoyez‑le et vérifiez qu'aucun guillemet ne manque.
3. L'assertion suivante fonctionne si la variable `string` a été préalablement définie — essayez maintenant :
```js
let badString = string;
badString;
```
`badString` est maintenant défini avec la même valeur que `string`.
### Guillemets simples vs guillemets doubles
1. En JavaScript, vous pouvez envelopper vos chaînes entre des guillemets simples ou doubles. Les deux expressions suivantes sont correctes :
```js
let sgl = 'Guillemet simple.';
let dbl = "Guillemets doubles.";
sgl;
dbl;
```
2. Il y a une toute petite différence entre les deux, et celle que vous retenez relève de la préférence personnelle. Prenez-en une, et tenez‑vous y toutefois : du code avec des mises entre guillemets diversifiées peut amener des confusions, en particulier si vous utilisez les deux sortes dans la même chaîne ! Ce qui suit renvoie une erreur :
```js example-bad
let badQuotes = 'Quoi sur Terre ?";
```
3. L'interpréteur pensera que la chaîne n'a pas été fermée, car le type de guillemet autre ne servant pas à délimiter les chaînes peut y être employé. Par exemple, ces deux assertions sont valables :
```js
let sglDbl = 'Mangeriez‑vous un "souper de poisson"?';
let dblSgl = "J'ai le blues.";
sglDbl;
dblSgl;
```
4. Bien entendu, vous ne pouvez pas inclure dans la chaîne le même type de guillemet que celui qui est utilisé pour la délimiter. Ce qui suit conduit à une erreur, car l'explorateur ne peut pas déterminer là où se termine la chaîne :
```js example-bad
let bigmouth = 'Je n'ai pas eu droit à prendre place...';
```
Voilà qui nous amène naturellement au prochain sujet.
### Échappement de caractères dans une chaîne
Pour corriger l'erreur dans notre ligne de code précédente, il nous suffit d'échapper au problème que pose le guillemet. « Échapper des caractères » signifie que nous les marquons de manière à ce qu'ils soient reconnus comme partie intégrante du texte, et non pas comme symbole de code. Dans JavaScript, nous le faisons en mettant une barre oblique inverse juste avant le caractère. Essayons :
```js
let bigmouth = 'Je n\'ai pas eu droit à prendre place...';
bigmouth;
```
Cela fonctionne à la perfection. Vous pouvez échapper d'autres caractères de la même manière, par ex. `\"`, et il y a certains codes spéciaux à côté. Voyez [Notations d'échappement](/fr/docs/Web/JavaScript/Reference/Global_Objects/String#escape_notation) pour plus de détails.
## Concaténation de chaînes
1. Concaténer est un terme de programmation du genre chic qui signifie « attacher ensemble ». Pour attacher des chaînes en JavaScript, on utilise l'opérateur plus (+) , le même que l'on utilise pour ajouter deux nombres, mais dans ce contexte il fait quelque chose de différent. Voyons un exemple dans la console.
```js
let one = 'Hello, ';
let two = 'comment allez‑vous ?';
let joined = one + two;
joined;
```
Il en résulte que la variable nommée `joined` contient la valeur "Hello, comment allez‑vous ?".
2. Dans le dernier exemple, nous avons juste attaché deux chaînes ensemble, mais vous pouvez en attacher autant que vous voulez, pour autant que vous mettiez un signe `+` entre chacune. Essayez ceci :
```js
let multiple = one + one + one + one + two;
multiple;
```
3. Vous pouvez aussi mélanger des variables avec des vraies chaînes. Regardez :
```js
let response = one + 'Je vais bien — et vous ' + two;
response;
```
> **Note :** Quand vous entrez une chaîne dans votre code, entre guillemets simples ou doubles, on l'appelle **chaîne littérale**.
### Concaténation dans un contexte
Examinons une concaténation dans une action — voici un exemple tiré en amont de ce cours :
```html
<button>Pressez‑moi</button>
```
```js
let button = document.querySelector('button');
button.onclick = function() {
let name = prompt('Quel est votre nom ?');
alert('Hello ' + name + ', sympa de vous voir !');
}
```
{{ EmbedLiveSample('Concaténation_dans_un_contexte', '100%', 50) }}
Ici nous utilisons en ligne 4 la fonction {{domxref("Window.prompt()", "Window.prompt()")}}, qui demande à l'utilisateur de répondre à une question par l'intermédiaire d'une boîte de dialogue, puis qui stocke le texte entré dans une variable donnée — dans ce cas `name`. En ligne 5, nous nous servons de la fonction {{domxref("Window.alert()", "Window.alert()")}} pour afficher un dialogue contenant une chaîne assemblée à partir de deux chaînes littérales et de la variable `name`, par concaténation.
### Nombres vs chaînes
1. Que se passe-t-il quand nous essayons d'additionner (ou concaténer) une chaîne et un nombre ? Essayons dans la console :
```js
'Front ' + 242;
```
Vous vous attendriez à déclencher une erreur, mais cela fonctionne parfaitement. Essayer de représenter une chaîne comme un nombre n'a vraiment aucun sens, mais représenter un nombre par une chaîne en a, donc le navigateur convertit adroitement le nombre en chaîne et concatène les deux chaînes.
2. Vous pouvez même faire cela avec deux nombres — vous forcez un nombre à devenir une chaîne en le mettant entre guillemets. Essayez ce qui suit (nous nous servons de l'opérateur `typeof` pour vérifier si la variable est un nombre ou une chaîne):
```js
let myDate = '19' + '67';
typeof myDate;
```
3. Si vous avez une variable numérique que vous souhaitez convertir en chaîne sans autre modification, ou une variable numérique que vous voulez convertir en chaîne sans autre modification, vous pouvez utiliser les constructions suivantes :
- L'objet {{jsxref("Number")}} convertit tout ce qui lui est passé en nombre, si c'est possible. Essayez :
```js
let myString = '123';
let myNum = Number(myString);
typeof myNum;
```
- D'autre part, tout nombre possède une méthode nommée [`toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) qui le convertit en chaîne équivalente. Essayez :
```js
let myNum = 123;
let myString = myNum.toString();
typeof myString;
```
Ces constructions peuvent être vraiment utiles en certaines circonstances. Par exemple, si un utilisateur entre un nombre dans un champ texte d'un formulaire, c'est une chaîne. Mais si vous voulez ajouter ce nombre à autre chose, il est nécessaire qu'il soit du type `number`, donc vous pouvez le faire passer par la méthode `Number()` pour gérer cela. C'est exactement ce que nous avons fait dans le jeu [Devinez un nombre, à la ligne 63](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L63).
## Conclusion
Voilà donc les bases de la manipulation des chaînes de caractères en JavaScript. Dans le prochain article, nous allons bâtir sur ces éléments en examinant certaines méthodes intégrées disponibles pour les chaînes de caractères dans JavaScript et en les utilisant pour mettre les chaînes de caractères dans la forme voulue.
{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}
|
