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
|
---
title: String.prototype.indexOf()
slug: Web/JavaScript/Reference/Objets_globaux/String/indexOf
tags:
- JavaScript
- Méthode
- Prototype
- Reference
- String
translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf
---
<div>{{JSRef}}</div>
<p>La méthode <strong><code>indexOf()</code></strong> renvoie l'indice de la première occurence de la valeur cherchée au sein de la chaîne courante (à partir de <code>indexDébut</code>). Elle renvoie -1 si la valeur cherchée n'est pas trouvée.</p>
<div>{{EmbedInteractiveExample("pages/js/string-indexof.html")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<div class="note">
<p><strong>Note :</strong> Pour la méthode associée aux tableaux, voir la page {{jsxref("Array.prototype.indexOf()")}}.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox"><var>str</var>.indexOf(<var>valeurRecherchée</var>)
<var>str</var>.indexOf(<var>valeurRecherchée</var>, <var>indexDébut</var>)
</pre>
<h3 id="Paramètres">Paramètres</h3>
<dl>
<dt><code>valeurRecherchée</code></dt>
<dd>Une chaîne représentant la valeur qu'on cherche dans la chaîne courante. Si aucune valeur n'est fournie explicitement,<a href="https://tc39.github.io/ecma262/#sec-tostring"> <code>valeurRecherchée</code> sera convertie en <code>"undefined"</code> et c'est cette chaîne qui sera recherchée</a>.</dd>
<dt><code>indexDébut</code></dt>
<dd>Paramètre optionnel. L'indice à partir duquel commencer la recherche, effectuée du début vers la fin de la liste. Cela peut être n'importe quel entier. La valeur par défaut est 0. Si <code>indexDébut < 0</code> la chaîne sera parcourue en entier (ce qui équivaut à utiliser 0). Si <code>indexDébut >= str.length</code>, la méthode renverra -1 sauf si <code>valeurRecherchée</code> est la chaîne vide, auquel cas, la méthode renverra <code>str.length</code>.</dd>
</dl>
<h3 id="Valeur_de_retour">Valeur de retour</h3>
<p>L'indice de la première occurrence de la valeur indiquée, <code>-1</code> si elle n'est pas trouvée. Si la valeur recherchée est la chaîne vide, une correspondance sera trouvée à n'importe quel index entre <code>0</code> et <code>str.length</code>.</p>
<h2 id="Description">Description</h2>
<p>Les caractères dans une chaîne de caractères sont indexés de la gauche à la droite. L'indice du premier caractère est 0, celui du dernier caractère (d'une chaîne <code>str</code>) est <code>str.length - 1.</code></p>
<pre class="brush: js">"Blue Whale".indexOf("Blue"); // retourne 0
"Blue Whale".indexOf("Blute"); // retourne -1
"Blue Whale".indexOf("Whale", 0); // retourne 5
"Blue Whale".indexOf("Whale", 5); // retourne 5
"Blue Whale".indexOf(""); // retourne 0
"Blue Whale".indexOf("", 9); // retourne 9
"Blue Whale".indexOf("", 10); // retourne 10
"Blue Whale".indexOf("", 11); // retourne 10</pre>
<h3 id="Sensibilité_à_la_casse">Sensibilité à la casse</h3>
<p>La méthode <code>indexOf()</code> est sensible à la casse. Par exemple, l'expression suivante retourne -1 :</p>
<pre class="brush: js">"Blue Whale".indexOf("blue") // retourne -1
</pre>
<p>Attention : <code>0</code> n'est pas une valeur qui peut être évaluée à <code>true</code> et <code>-1</code> n'est pas une valeur qui peut être évaluée à <code>false</code>. Ainsi, si on souhaite tester si une chaîne de caractères existe au sein d'une autre chaîne de caractères, on procèdera de cette façon (ou on utilisera {{jsxref("String.prototype.includes()")}}</p>
<pre class="brush: js">"Blue Whale".indexOf("Blue") != -1; // true
"Blue Whale".indexOf("Bloe") != -1; // false</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="Utiliser_indexOf()_et_lastIndexOf()">Utiliser <code>indexOf()</code> et <code>lastIndexOf()</code></h3>
<p>L'exemple suivant utilise <code>indexOf()</code> et <code>lastIndexOf()</code> pour localiser différentes valeurs dans la chaîne de caractères "<code>Brave new world</code>".</p>
<pre class="brush: js">const uneChaîne = "Brave new world"
console.log("Indice du premier w " + uneChaîne.indexOf("w"));
// Affiche 8
console.log("Indice du dernier w " + uneChaîne.lastIndexOf("w"));
// Affiche 10
console.log("Indice du premier 'new' " + uneChaîne.indexOf("new"));
// Affiche 6
console.log("Indice du dernier 'new' " + uneChaîne.lastIndexOf("new"));
// Affiche 6
</pre>
<h3 id="indexOf()_et_la_sensibilité_à_la_casse"><code>indexOf()</code> et la sensibilité à la casse</h3>
<p>L'exemple suivant définit 2 chaînes de caractères. Ces variables contiennent la meme chaîne de caractères sauf que la seconde chaîne de caractères contient des lettres majuscules. La première méthode <code>writeln</code> affiche 19. Cependant, comme la méthode <code>indexOf</code> est sensible à la casse, la chaîne de caractères "<code>cheddar</code>" n'est pas trouvée dans <code>myCapString</code>, donc le second résultat affiche -1.</p>
<pre class="brush: js">const maChaîne = "brie, reblochon, cheddar";
const maChaîneMajuscules = "Brie, Reblochon, Cheddar";
console.log('maChaîne.indexOf("cheddar") is '+ maChaîne.indexOf("cheddar"));
// Affiche 19
console.log('maChaîneMajuscules.indexOf("cheddar") is ' + maChaîneMajuscules.indexOf("cheddar"));
// Affiche -1</pre>
<h3 id="Utiliser_indexOf()_pour_compter_le_nombre_d'occurences_dans_une_chaîne_de_caractères">Utiliser <code>indexOf()</code> pour compter le nombre d'occurences dans une chaîne de caractères</h3>
<p>L'exemple suivant utilise la variable <code>count</code> pour stocker le nombre d'occurences de la lettre <code>x</code> dans la chaîne de caractère <code>str</code> :</p>
<pre class="brush: js">const str = "Chaîne x de test x";
let count = 0;
let pos = str.indexOf("x");
while ( pos != -1 ) {
count++;
pos = str.indexOf( "x",pos + 1 );
}
console.log(count); // Affiche 2</pre>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('ES1')}}</td>
<td>{{Spec2('ES1')}}</td>
<td>Définition initiale.</td>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td>
<td>{{Spec2('ES6')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
<p>{{Compat("javascript.builtins.String.indexOf")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{jsxref("String.prototype.charAt()")}}</li>
<li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
<li>{{jsxref("String.prototype.includes()")}}</li>
<li>{{jsxref("String.prototype.split()")}}</li>
<li>{{jsxref("Array.prototype.indexOf()")}}</li>
</ul>
|
