CINXE.COM

<!DOCTYPE html><html lang="fr" data-theme-enabled="1"><head><script>window.currentUser = null;</script><script>window.shopCurrency = "EUR";</script><script>window.localCurrency = "EUR";</script><script>window.countryCode = "fr";</script><script>window.rateShopTo = {"EUR":1,"USD":1.078956993853182,"AMD":421.5874435300883};</script><title itemprop="name">Strings</title><link href="/pack/styles.100020a0bc7cf13be729.css" rel="stylesheet"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="google" content="notranslate"><script>if (window.devicePixelRatio > 1) document.cookie = 'pixelRatio=' + window.devicePixelRatio + ';path=/;expires=Tue, 19 Jan 2038 03:14:07 GMT';</script><link href="//fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic" rel="stylesheet"><link rel="apple-touch-icon-precomposed" href="/img/favicon/apple-touch-icon-precomposed.png"><link rel="canonical" href="https://fr.javascript.info/string"><meta name="msapplication-TileColor" content="#222A2C"><meta name="msapplication-TileImage" content="/img/favicon/tileicon.png"><link rel="icon" href="/img/favicon/favicon.png"><meta itemprop="image" content="https://fr.javascript.info/img/site_preview_en_512x512.png"><meta property="og:title" content="Strings"><meta property="og:image" content="https://fr.javascript.info/img/site_preview_en_1200x630.png"><meta property="og:image:type" content="image/png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="fb:admins" content="100001562528165"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Strings"><meta name="twitter:site" content="@iliakan"><meta name="twitter:creator" content="@iliakan"><meta name="twitter:image" content="https://fr.javascript.info/img/site_preview_en_512x512.png"><meta name="google-adsense-account" content="ca-pub-6204518652652613"><link rel="prev" href="/number"><link rel="next" href="/array"><script data-collect-dnt="true" async src="https://scripts.simpleanalyticscdn.com/latest.js"></script><script>window.GA_ID = "UA-2056213-15";</script><script>window.YANDEX_METRIKA_ID = 32184394;</script><script>{function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-2LWB61WGYJ")}</script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-2LWB61WGYJ"></script><script>window.metrika={reachGoal:function(){}},window.yandex_metrika_callbacks=[function(){try{window.metrika=new Ya.Metrika({id:YANDEX_METRIKA_ID,webvisor:!0,clickmap:!0,params:{user:window.currentUser&&window.currentUser.id}}),metrika.trackLinks({delay:150}),window.addEventListener("error",function(r){window.metrika.reachGoal("JSERROR",{src:(r.filename||r.errorUrl)+": "+(r.lineno||r.errorLine),stack:r.stack||r.error&&r.error.stack,message:r.message})})}catch(r){}}];</script><script src="//mc.yandex.ru/metrika/watch.js" async></script><script>window.RECAPTCHA_ID = "6LfmLAEVAAAAAJMykMnf7aY8nkyTRmYi2ynx51R1";</script><script src="/pack/init.5ce4add6d34ce3873b87.js"></script><script src="/pack/head.bda20409a4233b435003.js" defer></script><meta property="og:title" content="Strings"><meta property="og:type" content="article"><script src="/pack/tutorial.6dc548047f76247d0296.js" defer></script><script src="/pack/footer.8204c68365693e9309b7.js" defer></script></head><body class="no-icons"><script>window.fontTest();</script><div class="page-wrapper page-wrapper_sidebar_on"><div class="sitetoolbar sitetoolbar_tutorial"><script>window.langs = [{"code":"ar","name":"Arabic"},{"code":"az","name":"Azerbaijani"},{"code":"bg","name":"Bulgarian"},{"code":"bn","name":"Bengali"},{"code":"bs","name":"Bosnian"},{"code":"ca","name":"Catalan"},{"code":"cs","name":"Czech"},{"code":"da","name":"Danish"},{"code":"de","name":"German"},{"code":"el","name":"Greek"},{"code":"en","name":"English"},{"code":"es","name":"Spanish"},{"code":"fa","name":"Persian (Farsi)"},{"code":"fi","name":"Finnish"},{"code":"fr","name":"French"},{"code":"he","name":"Hebrew"},{"code":"hi","name":"Hindi"},{"code":"hr","name":"Croatian"},{"code":"hu","name":"Hungarian"},{"code":"hy","name":"Armenian"},{"code":"id","name":"Indonesian"},{"code":"it","name":"Italian"},{"code":"ja","name":"Japanese"},{"code":"ka","name":"Georgian"},{"code":"kk","name":"Kazakh"},{"code":"km","name":"Central Khmer"},{"code":"ko","name":"Korean"},{"code":"ku","name":"Kurdish"},{"code":"ky","name":"Kyrgyz"},{"code":"lt","name":"Lithuanian"},{"code":"me","name":"Montenegrin"},{"code":"ml","name":"Malayalam"},{"code":"ms","name":"Malay"},{"code":"my","name":"Burmese"},{"code":"nl","name":"Dutch"},{"code":"no","name":"Norvegian"},{"code":"pa","name":"Punjabi"},{"code":"pl","name":"Polish"},{"code":"pt","name":"Portuguese"},{"code":"ro","name":"Romanian"},{"code":"ru","name":"Russian"},{"code":"si","name":"Sinhala"},{"code":"sk","name":"Slovak"},{"code":"sl","name":"Slovenian"},{"code":"sq","name":"Albanian"},{"code":"sr","name":"Serbian"},{"code":"ta","name":"Tamil"},{"code":"te","name":"Telugu"},{"code":"test","name":"Test"},{"code":"th","name":"Thai"},{"code":"tk","name":"Turkmen"},{"code":"tr","name":"Turkish"},{"code":"ug","name":"Uyghur"},{"code":"uk","name":"Ukrainian"},{"code":"ur","name":"Urdu"},{"code":"uz","name":"Uzbek"},{"code":"v2","name":"v2"},{"code":"vi","name":"Vietnamese"},{"code":"zh-hant","name":"Chinese Traditional"},{"code":"zh","name":"Chinese"}];</script><script>window.lang = "fr";</script><div class="sitetoolbar__content"><div class="sitetoolbar__lang-switcher"><button class="sitetoolbar__dropdown-button" data-dropdown-toggler>FR</button><div class="sitetoolbar__dropdown-wrap"><div class="sitetoolbar__dropdown-body"><div class="sitetoolbar__lang-switcher-body"><div class="supported-langs supported-langs_toolbar"><div class="supported-langs__container"><ul class="supported-langs__list" style="height:200px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://ar.javascript.info/string"><span class="supported-langs__brief">AR</span><span class="supported-langs__title">عربي</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://javascript.info/string"><span class="supported-langs__brief">EN</span><span class="supported-langs__title">English</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://es.javascript.info/string"><span class="supported-langs__brief">ES</span><span class="supported-langs__title">Español</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://fa.javascript.info/string"><span class="supported-langs__brief">FA</span><span class="supported-langs__title">فارسی</span></a></li><li class="supported-langs__item supported-langs__item_current"><a class="supported-langs__link" href="https://fr.javascript.info/string"><span class="supported-langs__brief">FR</span><span class="supported-langs__title">Français</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://id.javascript.info/string"><span class="supported-langs__brief">ID</span><span class="supported-langs__title">Indonesia</span></a></li></ul><ul class="supported-langs__list" style="height:200px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://it.javascript.info/string"><span class="supported-langs__brief">IT</span><span class="supported-langs__title">Italiano</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://ja.javascript.info/string"><span class="supported-langs__brief">JA</span><span class="supported-langs__title">日本語</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://ko.javascript.info/string"><span class="supported-langs__brief">KO</span><span class="supported-langs__title">한국어</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://learn.javascript.ru/string"><span class="supported-langs__brief">RU</span><span class="supported-langs__title">Русский</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://tr.javascript.info/string"><span class="supported-langs__brief">TR</span><span class="supported-langs__title">Türkçe</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://uk.javascript.info/string"><span class="supported-langs__brief">UK</span><span class="supported-langs__title">Українська</span></a></li></ul><ul class="supported-langs__list" style="height:20px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://zh.javascript.info/string"><span class="supported-langs__brief">ZH</span><span class="supported-langs__title">简体中文</span></a></li></ul></div><div class="supported-langs__text"><p>Nous souhaitons rendre ce projet open source disponible pour les gens du monde entier.</p> <p><a href="https://javascript.info/translate">Aidez-nous à traduire</a> le contenu de ce tutoriel dans votre langue!</p> </div></div></div></div></div></div><div class="sitetoolbar__logo-wrap"><a class="sitetoolbar__link sitetoolbar__link_logo" href="/"><img class="sitetoolbar__logo sitetoolbar__logo_normal" src="/img/sitetoolbar__logo_en.svg" width="200" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_normal sitetoolbar__logo_dark" src="/img/sitetoolbar__logo_en-white.svg" width="200" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_small" src="/img/sitetoolbar__logo_small_en.svg" width="70" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_small sitetoolbar__logo_dark" src="/img/sitetoolbar__logo_small_en-white.svg" width="70" alt="" role="presentation"/><script>Array.prototype.forEach.call(document.querySelectorAll("img.sitetoolbar__logo"),function(e){let t=document.createElement("object");t.type="image/svg+xml",t.className=e.className,t.style.cssText="left:0;top:0;position:absolute",t.onload=function(){t.onload=null,e.style.visibility="hidden"},t.data=e.src,e.parentNode.insertBefore(t,e)});</script></a></div><div class="sitetoolbar__nav-toggle-wrap"><button class="sitetoolbar__nav-toggle" type="button"></button></div><nav class="sitetoolbar__sections"><ul class="sitetoolbar__sections-list"></ul></nav><div class="sitetoolbar__right-button-wrap"><a class="sitetoolbar-right-button sitetoolbar-right-button_courses" href="/ebook"><span class="sitetoolbar-right-button__extra-text">Acheter</span>EPUB/PDF</a></div><div class="sitetoolbar__theme-switcher"><div class="theme-changer"><label class="theme-changer__label" for="theme-changer-input" data-tooltip="Change theme"><input class="theme-changer__input" type="checkbox" id="theme-changer-input" data-theme-changer="data-theme-changer"/><span class="theme-changer__icon theme-changer__icon_light-theme"></span><span class="theme-changer__icon theme-changer__icon_dark-theme"></span></label></div></div><div class="sitetoolbar__search-wrap"><div class="sitetoolbar__search-content"><button class="sitetoolbar__search-toggle" type="button"></button><form class="sitetoolbar__search" method="GET" action="/search"><div class="sitetoolbar__search-input"><div class="text-input"><input class="text-input__control" name="query" placeholder="Rechercher sur Javascript.info" required="required" type="text"/></div><button class="sitetoolbar__find" type="submit">Recherche</button></div></form></div></div></div><div class="tablet-menu"><div class="tablet-menu__line"><div class="tablet-menu__content"><form class="tablet-menu-search" action="/search/"><input class="tablet-menu-search__input" type="search" name="query" placeholder="Rechercher dans le tutoriel" required="required"/><button class="tablet-menu-search__button" type="submit" name="type" value="articles">Recherche</button></form></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><a class="map" href="/tutorial/map" data-action="tutorial-map"><span class="map__text">Carte du tutoriel</span></a></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><div class="theme-changer theme-changer_tablet-menu theme-changer_has-label"><label class="theme-changer__label" for="theme-changer-input-tablet" data-tooltip="Change theme"><input class="theme-changer__input" type="checkbox" id="theme-changer-input-tablet" data-theme-changer="data-theme-changer"/><span class="theme-changer__icon theme-changer__icon_light-theme"></span><span class="theme-changer__icon theme-changer__icon_dark-theme"></span><span class="theme-changer__label-text theme-changer__label-text_light-theme">Light theme</span><span class="theme-changer__label-text theme-changer__label-text_dark-theme">Dark theme</span></label></div></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><div class="share-icons"><span class="share-icons__title">Partager</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Ffr.javascript.info%2Fstring" rel="nofollow"></a><a class="share share_fb" href="https://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=https%3A%2F%2Ffr.javascript.info%2Fstring" rel="nofollow"></a></div></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><select class="tablet-menu__nav input-select input-select input-select_small" onchange="if(this.value) window.location.href=this.value"><option value="https://ar.javascript.info/string">عربي</option><option value="https://javascript.info/string">English</option><option value="https://es.javascript.info/string">Español</option><option value="https://fa.javascript.info/string">فارسی</option><option value="https://fr.javascript.info/string" selected>Français</option><option value="https://id.javascript.info/string">Indonesia</option><option value="https://it.javascript.info/string">Italiano</option><option value="https://ja.javascript.info/string">日本語</option><option value="https://ko.javascript.info/string">한국어</option><option value="https://learn.javascript.ru/string">Русский</option><option value="https://tr.javascript.info/string">Türkçe</option><option value="https://uk.javascript.info/string">Українська</option><option value="https://zh.javascript.info/string">简体中文</option></select></div></div></div><progress class="tutorial-progress" data-sticky value="39" max="93" data-tooltip="Cours 39 de 93"></progress></div><div class="page page_sidebar_on page_inner_padding"><script>if(localStorage.noSidebar){document.querySelector(".page").classList.remove("page_sidebar_on");let e=document.querySelector(".page-wrapper");e&&e.classList.remove("page-wrapper_sidebar_on")}setTimeout(function(){document.querySelector(".page").classList.add("page_sidebar-animation-on")});</script><div class="page__inner"><main class="main main_width-limit"><header class="main__header"><div class="main__header-inner"><div class="main__header-group"><ol class="breadcrumbs"><li class="breadcrumbs__item breadcrumbs__item_home"><a class="breadcrumbs__link" href="/"><span class="breadcrumbs__hidden-text">Tutoriel</span></a></li><li class="breadcrumbs__item" id="breadcrumb-1"><a class="breadcrumbs__link" href="/js"><span>JavaScript le langage</span></a></li><li class="breadcrumbs__item" id="breadcrumb-2"><a class="breadcrumbs__link" href="/data-types"><span>Types de données</span></a></li><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Tutoriel","item":"https://fr.javascript.info/"},{"@type":"ListItem","position":2,"name":"JavaScript le langage","item":"https://fr.javascript.info/js"},{"@type":"ListItem","position":3,"name":"Types de données","item":"https://fr.javascript.info/data-types"}]}</script></ol><div class="updated-at" data-tooltip="Dernière mise à jour le 19 octobre 2023"><div class="updated-at__content">19 octobre 2023</div></div></div><h1 class="main__header-title">Strings</h1></div></header><div class="content"><article class="formatted" itemscope itemtype="http://schema.org/TechArticle"><meta itemprop="name" content="Strings"><div itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="email" content="iliakan@gmail.com"><meta itemprop="name" content="Ilya Kantor"></div><div itemprop="articleBody"><p>En JavaScript, les données de type texte sont stockées sous forme de chaînes de caractères. Il n’y a pas de type séparé pour un seul caractère.</p> <p>Le format interne des chaînes de caractères est toujours <a href="https://en.wikipedia.org/wiki/UTF-16">UTF-16</a>, il n’est pas lié au codage de la page.</p> <h2><a class="main__anchor" name="quotes" href="#quotes">Quotes</a></h2><p>Rappelons les types de quotes.</p> <p>Les chaînes de caractères peuvent être placées entre guillemets simples, doubles ou backticks :</p> <div id="ebx7hc5r7q" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let single = 'single-quoted'; let double = "double-quoted"; let backticks = `backticks`;</code></pre> </div> </div> </div><p>Les guillemets simples et doubles sont essentiellement les mêmes. Les backticks nous permettent toutefois d’incorporer n’importe quelle expression dans la chaîne de caractères, en l’enveloppant dans <code>${…}</code> :</p> <div id="orc9b20xjp" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>function sum(a, b) { return a + b; } alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3.</code></pre> </div> </div> </div><p>L’utilisation des backticks présente également l’avantage de permettre à une chaîne de caractères de couvrir plusieurs lignes :</p> <div id="1nwu5cxqnd" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let guestList = `Guests: * John * Pete * Mary `; alert(guestList); // une liste d'invités sur plusieurs lignes</code></pre> </div> </div> </div><p>Ça a l’air naturel, non? Mais les guillemets simples ou doubles ne fonctionnent pas de cette façon.</p> <p>Si nous les utilisons et essayons d’utiliser plusieurs lignes, il y aura une erreur :</p> <div id="gd06bs96t2" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let guestList = "Guests: // Error: Unexpected token ILLEGAL * John";</code></pre> </div> </div> </div><p>Les guillemets simples et doubles proviennent d’anciens temps de la création linguistique lorsque la nécessité de chaînes multilignes n’était pas prise en compte. Les backticks sont apparus beaucoup plus tard et sont donc plus polyvalents.</p> <p>Les backticks nous permettent également de spécifier un “modèle de fonction” avant le premier backtick. La syntaxe est la suivante : <code>func`string`</code>. La fonction <code>func</code> est appelée automatiquement, elle reçoit la chaîne de caractères et les expressions incorporées et peut les traiter. Cette fonctionnalité est appelée “tagged templates”, elle est rarement vue, mais vous pouvez en savoir plus à ce sujet dans la doc MDN : <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates">Template literals</a>.</p> <h2><a class="main__anchor" name="caracteres-speciaux" href="#caracteres-speciaux">Caractères spéciaux</a></h2><p>Il est encore possible de créer des chaînes de caractères multilignes avec des guillemets simples et doubles en utilisant un “caractère de nouvelle ligne”, écrit comme ceci <code>\n</code>, qui spécifie un saut de ligne :</p> <div id="nee74e5x76" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let guestList = "Guests:\n * John\n * Pete\n * Mary"; alert(guestList); // une liste d'invités multiligne, pareil qu'au dessus</code></pre> </div> </div> </div><p>Comme exemple plus simple, ces deux lignes sont égales, juste écrites différemment :</p> <div id="1zcz2xnbcb" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let str1 = "Hello\nWorld"; // deux lignes utilisant un "symbole de nouvelle ligne" // deux lignes utilisant une nouvelle ligne normale et des backticks let str2 = `Hello World`; alert(str1 == str2); // true</code></pre> </div> </div> </div><p>Il existe d’autres caractères “spéciaux” moins courants.</p> <p>Voici la liste complète :</p> <table> <thead> <tr> <th>Caractère</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>\n</code></td> <td>Nouvelle ligne</td> </tr> <tr> <td><code>\r</code></td> <td>Dans les fichiers texte Windows, une combinaison de deux caractères <code>\r\n</code> représente une nouvelle pause, tandis que sur un système d’exploitation non Windows, il s’agit simplement de <code>\n</code>. C’est pour des raisons historiques, la plupart des logiciels Windows comprennent également <code>\n</code>.</td> </tr> <tr> <td><code>\'</code>, <code>\"</code></td> <td>Quotes</td> </tr> <tr> <td><code>\\</code></td> <td>Backslash</td> </tr> <tr> <td><code>\t</code></td> <td>Tab</td> </tr> <tr> <td><code>\b</code>, <code>\f</code>, <code>\v</code></td> <td>Backspace, Form Feed, Vertical Tab – conservés pour compatibilité, non utilisés de nos jours.</td> </tr> </tbody> </table> <p>Comme vous pouvez le voir, tous les caractères spéciaux commencent par un backslash (barre oblique inversée) <code>\</code>. On l’appelle aussi “caractère d’échappement”.</p> <p>Parce que c’est si spécial, si nous devons afficher une véritable barre oblique inverse <code>\</code> dans la chaîne, nous devons la doubler :</p> <div id="kpnizm0j6s" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>alert( `The backslash: \\` ); // The backslash: \</code></pre> </div> </div> </div><p>Les guillemets dits “échappés” <code>\'</code>, <code>\"</code>, <code>\`</code> sont utilisés pour insérer un guillemet dans la même chaîne entre guillemets.</p> <p>Par exemple :</p> <div id="3s0rqczbet" data-trusted="1" class="code-example" data-highlight="[{"start":0,"cols":[{"start":9,"end":11},{"start":32,"end":35}]}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>alert( 'I\'m the Walrus!' ); // I'm the Walrus!</code></pre> </div> </div> </div><p>Comme vous pouvez le constater, nous devons précéder le simple quote intérieure du backslash <code>\'</code>, sinon, cela indiquerait la fin de la chaîne de caractères.</p> <p>Bien sûr, il ne faut échapper que les guillemets identiques à ceux qui les entourent. Donc, comme solution plus élégante, nous pourrions passer aux guillemets doubles ou aux backticks :</p> <div id="zu1qe5kjz0" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>alert( "I'm the Walrus!" ); // I'm the Walrus!</code></pre> </div> </div> </div><p>Outre ces caractères spéciaux, il existe également une notation spéciale pour les codes Unicode <code>\u…</code>, elle est rarement utilisée et est couverte dans le chapitre facultatif sur <a href="/unicode">Unicode</a>.</p> <h2><a class="main__anchor" name="longueur-de-chaine-de-caracteres" href="#longueur-de-chaine-de-caracteres">Longueur de chaîne de caractères</a></h2><p>La propriété <code>length</code> indique la longueur de la chaîne de caractères :</p> <div id="zd74ozv2f7" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>alert( `My\n`.length ); // 3</code></pre> </div> </div> </div><p>Notez que <code>\n</code> est un seul caractère “spécial”, la longueur est donc bien <code>3</code>.</p> <div class="important important_warn"> <div class="important__header"><span class="important__type"><code>length</code> est une propriété</span></div> <div class="important__content"><p>Les personnes ayant des connaissances dans d’autres langages peuvent parfois commettre des erreurs en l’appelant <code>str.length()</code> au lieu de <code>str.length</code>. Cela ne fonctionne pas.</p> <p>Veuillez noter que <code>str.length</code> est une propriété numérique et non une fonction. Il n’est pas nécessaire d’ajouter des parenthèses après. Pas <code>.length()</code>, mais <code>.length</code>.</p> </div></div> <h2><a class="main__anchor" name="acceder-aux-caracteres" href="#acceder-aux-caracteres">Accéder aux caractères</a></h2><p>Pour obtenir un caractère à la position <code>pos</code>, utilisez des crochets <code>[pos]</code> ou appelez la méthode <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/String/at">str.at(pos)</a>. Le premier caractère commence à la position zéro :</p> <div id="1uni8gsuyo" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let str = `Hello`; // le premier caractère alert( str[0] ); // H alert( str.at(0) ); // H // le dernier caractère alert( str[str.length - 1] ); // o alert( str.at(-1) ); // o</code></pre> </div> </div> </div><p>Comme vous pouvez le voir, la méthode <code>.at(pos)</code> a l’avantage de permettre une position négative. Si <code>pos</code> est négatif, alors il est compté à partir de la fin de la chaîne de caractères.</p> <p>Donc <code>.at(-1)</code> signifie le dernier caractère, et <code>.at(-2)</code> est celui qui le précède, etc.</p> <p>Les crochets renvoient toujours <code>undefined</code> pour les index négatifs, par exemple :</p> <div id="9zsk9bbo1l" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let str = `Hello`; alert( str[-2] ); // undefined alert( str.at(-2) ); // l</code></pre> </div> </div> </div><p>Nous pouvons également parcourir les caractères en utilisant un <code>for..of</code> :</p> <div id="chtjbvtchx" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>for (let char of "Hello") { alert(char); // H,e,l,l,o (char devient "H", ensuite "e", ensuite "l", etc.) }</code></pre> </div> </div> </div><h2><a class="main__anchor" name="les-chaines-de-caracteres-sont-immuables" href="#les-chaines-de-caracteres-sont-immuables">Les chaînes de caractères sont immuables</a></h2><p>Les chaînes de caractères ne peuvent pas être changées en JavaScript. Il est impossible de modifier un caractère.</p> <p>Essayons de démontrer que cela ne fonctionne pas :</p> <div id="folu6tauqk" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let str = 'Hi'; str[0] = 'h'; // error alert( str[0] ); // ne fonctionne pas</code></pre> </div> </div> </div><p>La solution habituelle consiste à créer une nouvelle chaîne et à l’affecter à <code>str</code> au lieu de l’ancienne.</p> <p>Par exemple :</p> <div id="3glm63f4ph" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let str = 'Hi'; str = 'h' + str[1]; // remplace la haine de caractères alert( str ); // hi</code></pre> </div> </div> </div><p>Nous verrons plus d’exemples dans les sections suivantes.</p> <h2><a class="main__anchor" name="modifier-la-casse" href="#modifier-la-casse">Modifier la casse</a></h2><p>Les méthodes <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/toLowerCase">toLowerCase()</a> et <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/toUpperCase">toUpperCase()</a> modifient la casse :</p> <div id="bkktcpxz0r" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>alert( 'Interface'.toUpperCase() ); // INTERFACE alert( 'Interface'.toLowerCase() ); // interface</code></pre> </div> </div> </div><p>Ou, si nous voulons un seul caractère minuscule :</p> <div id="hixg37zo4i" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>alert( 'Interface'[0].toLowerCase() ); // 'i'</code></pre> </div> </div> </div><h2><a class="main__anchor" name="rechercher-un-substring-partie-de-la-chaine-de-caracteres" href="#rechercher-un-substring-partie-de-la-chaine-de-caracteres">Rechercher un substring (partie de la chaîne de caractères)</a></h2><p>Il existe plusieurs façons de rechercher une partie d’une chaîne de caractères.</p> <h3><a class="main__anchor" name="str-indexof" href="#str-indexof">str.indexOf</a></h3><p>La première méthode est <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/indexOf">str.indexOf(substr, pos)</a>.</p> <p>Il cherche le <code>substr</code> dans <code>str</code>, en partant de la position donnée <code>pos</code>, et retourne la position où la correspondance a été trouvée ou <code>-1</code> si rien ne peut être trouvé.</p> <p>Par exemple :</p> <div id="545psqostb" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let str = 'Widget with id'; alert( str.indexOf('Widget') ); // 0, parce que 'Widget' est trouvé au début alert( str.indexOf('widget') ); // -1, pas trouvé, la recherche est sensible à la casse alert( str.indexOf("id") ); // 1, "id" est trouvé à la position 1 (..idget avec id)</code></pre> </div> </div> </div><p>Le second paramètre optionnel nous permet de rechercher à partir de la position donnée.</p> <p>Par exemple, la première occurrence de <code>"id"</code> est à la position <code>1</code>. Pour rechercher l’occurrence suivante, commençons la recherche à partir de la position <code>2</code> :</p> <div id="0p7vc1xxjh" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let str = 'Widget with id'; alert( str.indexOf('id', 2) ) // 12</code></pre> </div> </div> </div><p>Si toutes les occurrences nous intéressent, nous pouvons exécuter <code>indexOf</code> dans une boucle. Chaque nouvel appel est passé avec la position après le match précédent :</p> <div id="l336ithfl" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let str = 'As sly as a fox, as strong as an ox'; let target = 'as'; // cherchons le let pos = 0; while (true) { let foundPos = str.indexOf(target, pos); if (foundPos == -1) break; alert( `Found at ${foundPos}` ); pos = foundPos + 1; // continue la recherche à partir de la position suivante }</code></pre> </div> </div> </div><p>Le même algorithme peut être raccourci :</p> <div id="zhafc3a7o7" data-trusted="1" class="code-example" data-highlight="[{"start":3,"end":6}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let str = "As sly as a fox, as strong as an ox"; let target = "as"; let pos = -1; while ((pos = str.indexOf(target, pos + 1)) != -1) { alert( pos ); }</code></pre> </div> </div> </div><div class="important important_smart"> <div class="important__header"><span class="important__type"><code>str.lastIndexOf(pos)</code></span></div> <div class="important__content"><p>Il y a aussi une méthode similaire <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf">str.lastIndexOf(pos)</a> qui cherche de la fin d’une chaîne de caractères à son début.</p> <p>Elle liste les occurrences dans l’ordre inverse.</p> </div></div> <p>Il y a un léger inconvénient avec <code>indexOf</code> dans le test <code>if</code>. On ne peut pas le mettre dans le <code>if</code> comme ceci :</p> <div id="bn452u45t3" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let str = "Widget with id"; if (str.indexOf("Widget")) { alert("We found it"); // ne fonctionne pas ! }</code></pre> </div> </div> </div><p>L’<code>alert</code> dans l’exemple ci-dessus ne s’affiche pas parce que <code>str.indexOf("Widget")</code> retourne <code>0</code> (ce qui signifie qu’il a trouvé la correspondance à la position de départ). Oui, mais <code>if</code> considère que <code>0</code> est <code>false</code>.</p> <p>Nous devrions donc effectuer la vérification avec <code>-1</code>, comme ceci :</p> <div id="1v0aobrrje" data-trusted="1" class="code-example" data-highlight="[{"start":2,"end":2}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let str = "Widget with id"; if (str.indexOf("Widget") != -1) { alert("We found it"); // fonctionne maintenant ! }</code></pre> </div> </div> </div><h3><a class="main__anchor" name="includes-startswith-endswith" href="#includes-startswith-endswith">includes, startsWith, endsWith</a></h3><p>La méthode plus moderne <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/String/includes">str.includes(substr, pos)</a> retourne <code>true</code>/<code>false</code> en fonction de si <code>str</code> contient <code>substr</code>.</p> <p>C’est le bon choix si nous devons tester la présence, mais n’avons pas besoin de sa position :</p> <div id="i95eqyh8ml" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>alert( "Widget with id".includes("Widget") ); // true alert( "Hello".includes("Bye") ); // false</code></pre> </div> </div> </div><p>Le deuxième argument optionnel de <code>str.includes</code> est la position de départ de la recherche :</p> <div id="52ykrqg02b" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>alert( "Widget".includes("id") ); // true alert( "Widget".includes("id", 3) ); // false, à partir de la position 3, il n'y a pas de "id"</code></pre> </div> </div> </div><p>Les méthodes <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith">str.startsWith</a> et <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith">str.endsWith</a> font exactement ce qu’elle disent :</p> <div id="fw8z8mfwwa" data-trusted="1" class="code-example" data-highlight="[{"start":1,"cols":[{"start":11,"end":14}]},{"start":0,"cols":[{"start":8,"end":11}]}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>alert( "Widget".startsWith("Wid") ); // true, "Widget" démarre avec "Wid" alert( "Widget".endsWith("get") ); // true, "Widget" fini avec "get"</code></pre> </div> </div> </div><h2><a class="main__anchor" name="obtenir-un-substring-sous-chaine-de-caracteres" href="#obtenir-un-substring-sous-chaine-de-caracteres">Obtenir un substring (sous-chaîne de caractères)</a></h2><p>Il existe 3 méthodes en JavaScript pour obtenir un substring : <code>substring</code>, <code>substr</code> et <code>slice</code>.</p> <dl> <dt><code>str.slice(start [, end])</code></dt> <dd> <p>Renvoie la partie de la chaîne de caractères de <code>start</code> jusqu’à (sans l’inclure) <code>end</code>.</p> <p>Par exemple :</p> <div id="d46ytpkud5" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let str = "stringify"; alert( str.slice(0, 5) ); // 'strin', le substring de 0 à 5 (sans inclure 5) alert( str.slice(0, 1) ); // 's', de 0 à 1, mais sans inclure 1, donc uniquement le caractère à l'index 0</code></pre> </div> </div> </div><p>S’il n’y a pas de second argument, <code>slice</code> va jusqu’à la fin de la chaîne de caractères :</p> <div id="ejz6rsf9ba" data-trusted="1" class="code-example" data-highlight="[{"start":0,"cols":[{"start":13,"end":20}]}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let str = "stringify"; alert( str.slice(2) ); // 'ringify', à partir de la 2e position jusqu'à la fin</code></pre> </div> </div> </div><p>Des valeurs négatives pour <code>start</code>/<code>end</code> sont également possibles. Elles veulent dire que la position est comptée à partir de la fin de la chaîne de caractères :</p> <div id="zomexam1sy" data-trusted="1" class="code-example" data-highlight="[{"start":0,"cols":[{"start":16,"end":19}]}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let str = "stringify"; // commence à la 4ème position à partir de la droite, se termine au 1er à partir de la droite alert( str.slice(-4, -1) ); // 'gif'</code></pre> </div> </div> </div></dd> <dt><code>str.substring(start [, end])</code></dt> <dd> <p>Renvoie la partie de la chaîne de caractères <em>entre</em> <code>start</code> et <code>end</code> (<code>end</code> non inclus).</p> <p>C’est presque la même chose que <code>slice</code>, mais cela permet à <code>start</code> d’être supérieur à <code>end</code> (dans ce cas, il échange simplement les valeurs <code>start</code> et <code>end</code>).</p> <p>Par exemple :</p> <div id="9aq31mwjx9" data-trusted="1" class="code-example" data-highlight="[{"start":0,"cols":[{"start":13,"end":17}]}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let str = "stringify"; // ce sont les mêmes pour substring alert( str.substring(2, 6) ); // "ring" alert( str.substring(6, 2) ); // "ring" // ...mais pas pour slice : alert( str.slice(2, 6) ); // "ring" (le même résultat) alert( str.slice(6, 2) ); // "" (une chaîne de caractères vide)</code></pre> </div> </div> </div><p>Les arguments négatifs ne sont pas supportés (contrairement à slice), ils sont traités comme <code>0</code>.</p> </dd> <dt><code>str.substr(start [, length])</code></dt> <dd> <p>Renvoie la partie de la chaîne de caractères à partir de <code>start</code>, avec le <code>length</code> (longueur) donné.</p> <p>Contrairement aux méthodes précédentes, celle-ci nous permet de spécifier la longueur <code>length</code> au lieu de la position finale :</p> <div id="jew4tzvgc3" data-trusted="1" class="code-example" data-highlight="[{"start":0,"cols":[{"start":13,"end":17}]}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let str = "stringify"; alert( str.substr(2, 4) ); // 'ring', à partir de la 2ème position on obtient 4 caractères</code></pre> </div> </div> </div><p>Le premier argument peut être négatif, pour compter à partir de la fin :</p> <div id="orv7ym8zl1" data-trusted="1" class="code-example" data-highlight="[{"start":0,"cols":[{"start":16,"end":18}]}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let str = "stringify"; alert( str.substr(-4, 2) ); // 'gi', à partir de la 4ème position on obtient 2 caractères</code></pre> </div> </div> </div></dd> </dl> <p>Cette méthode réside dans l’<a href="https://tc39.es/ecma262/#sec-string.prototype.substr">Annexe B</a> de la spécification du langage. Cela signifie que seuls les moteurs JavaScript hébergés par un navigateur doivent le prendre en charge et qu’il n’est pas recommandé de l’utiliser. En pratique, il est supporté partout.</p> <p>Récapitulons ces méthodes pour éviter toute confusion :</p> <table> <thead> <tr> <th>méthodes</th> <th>séléction …</th> <th>valeurs negatives</th> </tr> </thead> <tbody> <tr> <td><code>slice(start, end)</code></td> <td>de <code>start</code> à <code>end</code> (n’inclue pas <code>end</code>)</td> <td>permet les négatifs</td> </tr> <tr> <td><code>substring(start, end)</code></td> <td>entre <code>start</code> et <code>end</code></td> <td>les valeurs négatives signifient <code>0</code></td> </tr> <tr> <td><code>substr(start, length)</code></td> <td>de <code>start</code> obtient <code>length</code> caractères</td> <td>permet un <code>start</code> negatif</td> </tr> </tbody> </table> <div class="important important_smart"> <div class="important__header"><span class="important__type">Lequel choisir ?</span></div> <div class="important__content"><p>Tous peuvent faire le travail. Formellement, <code>substr</code> présente un inconvénient mineur : il n’est pas décrit dans la spécification JavaScript principale, mais dans l’Annexe B, qui couvre les fonctionnalités réservées au navigateur qui existent principalement pour des raisons historiques. Ainsi, les environnements autres que les navigateurs peuvent ne pas le prendre en charge. Mais dans la pratique, cela fonctionne partout.</p> <p>Parmi les deux autres variantes, <code>slice</code> est un peu plus flexible, il permet des arguments négatifs et une écriture plus courte.</p> <p>Donc, pour une utilisation pratique, il suffit de ne retenir que “slice”.</p> </div></div> <h2><a class="main__anchor" name="comparer-les-strings" href="#comparer-les-strings">Comparer les strings</a></h2><p>Comme nous le savons du chapitre <a href="/comparison">Comparaisons</a>, les strings sont comparées caractère par caractère dans l’ordre alphabétique.</p> <p>Bien que, il y a quelques bizarreries.</p> <ol> <li> <p>Une lettre minuscule est toujours plus grande qu’une majuscule :</p> <div id="jvgrcy3nkj" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>alert( 'a' > 'Z' ); // true</code></pre> </div> </div> </div></li> <li> <p>Les lettres avec des signes diacritiques sont “hors d’usage” :</p> <div id="2mpz3egd7l" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>alert( 'Österreich' > 'Zealand' ); // true</code></pre> </div> </div> </div><p>Cela peut conduire à des résultats étranges si nous trions ces noms de pays. Habituellement, les gens s’attendent à trouver <code>Zealand</code> après <code>Österreich</code> dans la liste.</p> </li> </ol> <p>Pour comprendre ce qui se passe, nous devons être conscients que les chaînes de caractères en JavaScript sont encodées en utilisant <a href="https://en.wikipedia.org/wiki/UTF-16">UTF-16</a>. C’est-à-dire que chaque caractère a un code numérique correspondant.</p> <p>Il existe des méthodes spéciales qui permettent d’obtenir le caractère pour le code et inversement :</p> <dl> <dt><code>str.codePointAt(pos)</code></dt> <dd> <p>Renvoie un nombre décimal représentant le code du caractère à la position <code>pos</code> :</p> <div id="17dniz1fdz" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// différentes lettres majuscules ont des codes différents alert( "Z".codePointAt(0) ); // 90 alert( "z".codePointAt(0) ); // 122 alert( "z".codePointAt(0).toString(16) ); // 7a (si nous avons besoin d'une valeur hexadécimale)</code></pre> </div> </div> </div></dd> <dt><code>String.fromCodePoint(code)</code></dt> <dd> <p>Crée un caractère par son <code>code</code> chiffre</p> <div id="sypy55mfn2" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>alert( String.fromCodePoint(90) ); // Z alert( String.fromCodePoint(0x5a) ); // Z (nous pouvons également utiliser une valeur hexadécimale comme argument)</code></pre> </div> </div> </div></dd> </dl> <p>Voyons maintenant les caractères avec les codes <code>65..220</code> (l’alphabet latin et un peu plus) en créant une chaîne de caractères de ceux-ci :</p> <div id="7mdqv0y97c" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let str = ''; for (let i = 65; i <= 220; i++) { str += String.fromCodePoint(i); } alert( str ); // Output: // ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~ // ¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜ</code></pre> </div> </div> </div><p>Vous voyez ? Les caractères majuscules sont les premiers, puis quelques spéciaux, puis les minuscules, et <code>Ö</code> vers la fin de la sortie.</p> <p>Maintenant, cela devient évident pourquoi <code>a > Z</code>.</p> <p>Les caractères sont comparés par leur code numérique. Le plus grand code signifie que le caractère est plus grand. Le code pour <code>a</code> (97) est supérieur au code pour <code>Z</code> (90).</p> <ul> <li>Toutes les lettres minuscules vont après les lettres majuscules car leurs codes sont plus grands.</li> <li>Certaines lettres comme <code>Ö</code> se distinguent de l’alphabet principal. Ici, le code est supérieur à tout ce qui va de <code>a</code> à <code>z</code>.</li> </ul> <h3><a class="main__anchor" name="comparaisons-correctes" href="#comparaisons-correctes">Les comparaisons correctes</a></h3><p>L’algorithme “approprié” pour effectuer des comparaisons de chaînes est plus complexe qu’il n’y paraît, car les alphabets diffèrent d’une langue à l’autre.</p> <p>Le navigateur doit donc connaître la langue à comparer.</p> <p>Heureusement, les navigateurs modernes prennent en charge la norme d’internationalisation <a href="https://www.ecma-international.org/publications-and-standards/standards/ecma-402/">ECMA-402</a>.</p> <p>Elle fournit une méthode spéciale pour comparer des chaînes de caractères dans différentes langues, en respectant leurs règles.</p> <p>L’appel <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare">str.localeCompare(str2)</a> renvoie un entier indiquant si <code>str</code> est inférieur, égal ou supérieur à <code>str2</code> selon les règles du langage :</p> <ul> <li>Renvoie un nombre négatif si <code>str</code> est inférieur à <code>str2</code></li> <li>Renvoie un nombre positif si <code>str</code> est supérieur à <code>str2</code></li> <li>Renvoie <code>0</code> s’ils sont équivalents.</li> </ul> <p>Par exemple :</p> <div id="lebe9s1lwd" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>alert( 'Österreich'.localeCompare('Zealand') ); // -1</code></pre> </div> </div> </div><p>Cette méthode a en fait deux arguments supplémentaires spécifiés dans <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/localeCompare">la documentation</a>, ce qui lui permet de spécifier la langue (par défaut, pris dans l’environnement, l’ordre des lettres dépend de la langue) et de définir des règles supplémentaires telles que la sensibilité à la casse ou doit-on traiter <code>"a"</code> et <code>"á"</code> de la même manière, etc.</p> <h2><a class="main__anchor" name="resume" href="#resume">Résumé</a></h2><ul> <li>Il existe 3 types de quotes. Les backticks permettent à une chaîne de caractères de s’étendre sur plusieurs lignes et d’intégrer des expressions <code>${…}</code>.</li> <li>Nous pouvons utiliser des caractères spéciaux, comme un saut de ligne <code>\n</code>.</li> <li>Pour obtenir un caractère d’une string, utilisez <code>[]</code> ou la méthode <code>at</code>.</li> <li>Pour obtenir un substring, utilisez <code>slice</code> ou <code>substring</code>.</li> <li>Pour mettre une chaîne de caractères en minuscule ou en majuscule, utilisez <code>toLowerCase</code> ou <code>toUpperCase</code>.</li> <li>Pour rechercher un substring, utilisez <code>indexOf</code>, ou <code>includes</code> / <code>startsWith</code> / <code>endsWith</code> pour de simple vérifications.</li> <li>Pour comparer les chaînes de caractères en fonction de la langue, utilisez la méthode <code>localeCompare</code>, si non ils sont comparés par les codes de caractères.</li> </ul> <p>Il existe plusieurs autres méthodes utiles dans les strings :</p> <ul> <li><code>str.trim()</code> – retire les espaces (“trims”) du début et de la fin de la chaîne de caractères.</li> <li><code>str.repeat(n)</code> – répète la chaîne de caractères <code>n</code> fois.</li> <li>… et plus. Voir le <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String">manuel</a> pour plus de détails.</li> </ul> <p>Les strings ont aussi des méthodes pour rechercher / remplacer avec des expressions régulières. Mais c’est un sujet important, il est donc expliqué dans une autre section de ce tutoriel <a href="/regular-expressions">Expressions régulières</a>.</p> <p>De plus, à partir de maintenant, il est important de savoir que les chaînes de caractères sont basées sur l’encodage Unicode, et donc il y a des problèmes avec les comparaisons. Il y a plus d’informations sur Unicode dans le chapitre <a href="/unicode">Unicode et fonctionnement des chaînes de caractères</a>.</p> </div></article><div class="tasks formatted"><h2 class="tasks__title" id="tasks"><a class="tasks__title-anchor main__anchor main__anchor main__anchor_noicon" href="#tasks">Exercices</a></h2><div class="task tasks__task"><div class="task__header"><div class="task__title-wrap"><h3 class="task__title"><a class="main__anchor" href="#mettre-en-majuscule-le-premier-caractere" name="mettre-en-majuscule-le-premier-caractere">Mettre en majuscule le premier caractère</a></h3><a class="task__open-link" href="/task/ucfirst" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="Quelle est l'importance de l’exercice, de 1 à 5">importance: 5</span></div><div class="task__content"><div class="task__formatted"><p>Écrire une fonction <code>ucFirst(str)</code> qui retourne la chaîne de caractères <code>str</code> avec le premier caractère majuscule, par exemple :</p> <div id="2u1piefwoe" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>ucFirst("john") == "John";</code></pre> </div> </div> </div><p><a href="https://plnkr.co/edit/N02CJpGTzLdYvK1S?p=preview" target="_blank" data-plunk-id="N02CJpGTzLdYvK1S">Open a sandbox with tests.</a></p></div><button class="task__solution" type="button">solution</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><p>Nous ne pouvons pas “remplacer” le premier caractère, car les chaînes de caractères en JavaScript sont immuables.</p> <p>Mais nous pouvons créer une nouvelle chaîne de caractères basée sur celle existante, avec le premier caractère majuscule :</p> <div id="o9qa6j9en8" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let newStr = str[0].toUpperCase() + str.slice(1);</code></pre> </div> </div> </div><p>Il y a un petit problème cependant. Si <code>str</code> est vide, alors <code>str[0]</code> est <code>undefined</code>, et comme <code>undefined</code> n’a pas la méthode <code>toUpperCase()</code>, nous aurons une erreur.</p> <p>La solution la plus simple consiste à ajouter un test pour une chaîne vide, comme ceci :</p> <div id="db1wfam1o4" data-trusted="1" class="code-example" data-demo="1"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>function ucFirst(str) { if (!str) return str; return str[0].toUpperCase() + str.slice(1); } alert( ucFirst("john") ); // John</code></pre> </div> </div> </div><p><a href="https://plnkr.co/edit/drq7AbH49Akwx2S1?p=preview" target="_blank" data-plunk-id="drq7AbH49Akwx2S1">Ouvrez la solution avec des tests dans une sandbox.</a></p></div></div><button class="close-button task__answer-close" type="button" title="fermer"></button></div></div></div></div><div class="task tasks__task"><div class="task__header"><div class="task__title-wrap"><h3 class="task__title"><a class="main__anchor" href="#verifier-le-spam" name="verifier-le-spam">Vérifier le spam</a></h3><a class="task__open-link" href="/task/check-spam" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="Quelle est l'importance de l’exercice, de 1 à 5">importance: 5</span></div><div class="task__content"><div class="task__formatted"><p>Écrire une fonction <code>checkSpam(str)</code> qui retourne <code>true</code> si <code>str</code> contient ‘viagra’ ou ‘XXX’, sinon <code>false</code>.</p> <p>La fonction doit être sensible à la casse :</p> <div id="51ysy72pmv" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>checkSpam('buy ViAgRA now') == true checkSpam('free xxxxx') == true checkSpam("innocent rabbit") == false</code></pre> </div> </div> </div><p><a href="https://plnkr.co/edit/hFAGQSkPRJitQhcS?p=preview" target="_blank" data-plunk-id="hFAGQSkPRJitQhcS">Open a sandbox with tests.</a></p></div><button class="task__solution" type="button">solution</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><p>Pour rendre la recherche insensible à la casse, transformons la chaîne de caractères en minuscule, puis recherchons :</p> <div id="xax17effhh" data-trusted="1" class="code-example" data-demo="1"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>function checkSpam(str) { let lowerStr = str.toLowerCase(); return lowerStr.includes('viagra') || lowerStr.includes('xxx'); } alert( checkSpam('buy ViAgRA now') ); alert( checkSpam('free xxxxx') ); alert( checkSpam("innocent rabbit") );</code></pre> </div> </div> </div><p><a href="https://plnkr.co/edit/rtQN2OT3DMTyeI22?p=preview" target="_blank" data-plunk-id="rtQN2OT3DMTyeI22">Ouvrez la solution avec des tests dans une sandbox.</a></p></div></div><button class="close-button task__answer-close" type="button" title="fermer"></button></div></div></div></div><div class="task tasks__task"><div class="task__header"><div class="task__title-wrap"><h3 class="task__title"><a class="main__anchor" href="#tronquer-le-texte" name="tronquer-le-texte">Tronquer le texte</a></h3><a class="task__open-link" href="/task/truncate" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="Quelle est l'importance de l’exercice, de 1 à 5">importance: 5</span></div><div class="task__content"><div class="task__formatted"><p>Créer une fonction <code>truncate(str, maxlength)</code> qui vérifie la longueur de <code>str</code> et, si elle dépasse <code>maxlength</code>, remplace la fin de <code>str</code> avec le caractère des ellipses <code>"…"</code> pour rendre sa longueur égale à <code>maxlength</code>.</p> <p>Le résultat de la fonction doit être la chaîne de caractères tronquée (si nécessaire).</p> <p>Par exemple :</p> <div id="k7djh5x7qd" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>truncate("What I'd like to tell on this topic is:", 20) = "What I'd like to te…" truncate("Hi everyone!", 20) = "Hi everyone!"</code></pre> </div> </div> </div><p><a href="https://plnkr.co/edit/yK7yHXC0NUt16fWx?p=preview" target="_blank" data-plunk-id="yK7yHXC0NUt16fWx">Open a sandbox with tests.</a></p></div><button class="task__solution" type="button">solution</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><p>La longueur maximale doit être <code>maxlength</code>, il faut donc la couper un peu plus courte pour laisser de la place aux ellipses.</p> <p>Notez qu’il existe en réalité un seul caractère Unicode pour une ellipse. Ce n’est pas trois points.</p> <div id="qw8z3827h2" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>function truncate(str, maxlength) { return (str.length > maxlength) ? str.slice(0, maxlength - 1) + '…' : str; }</code></pre> </div> </div> </div><div id="voew4zzcur" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>function truncate(str, maxlength) { return (str.length > maxlength) ? str.slice(0, maxlength - 1) + '…' : str; }</code></pre> </div> </div> </div><p><a href="https://plnkr.co/edit/b7MTuaSIynLmvdMA?p=preview" target="_blank" data-plunk-id="b7MTuaSIynLmvdMA">Ouvrez la solution avec des tests dans une sandbox.</a></p></div></div><button class="close-button task__answer-close" type="button" title="fermer"></button></div></div></div></div><div class="task tasks__task"><div class="task__header"><div class="task__title-wrap"><h3 class="task__title"><a class="main__anchor" href="#extraire-l-argent" name="extraire-l-argent">Extraire l'argent</a></h3><a class="task__open-link" href="/task/extract-currency" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="Quelle est l'importance de l’exercice, de 1 à 5">importance: 4</span></div><div class="task__content"><div class="task__formatted"><p>Nous avons un coût sous la forme <code>"$120"</code>. C’est-à-dire que le signe dollar commence, puis le nombre.</p> <p>Créer une fonction <code>extractCurrencyValue(str)</code> qui extrait la valeur numérique d’une telle chaîne de caractères et la renvoit.</p> <p>L’exemple :</p> <div id="csrjptwnhk" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>alert( extractCurrencyValue('$120') === 120 ); // true</code></pre> </div> </div> </div><p><a href="https://plnkr.co/edit/GnfqvW33HNREoT6q?p=preview" target="_blank" data-plunk-id="GnfqvW33HNREoT6q">Open a sandbox with tests.</a></p></div><button class="task__solution" type="button">solution</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><div id="fdrwu514ry" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>function extractCurrencyValue(str) { return +str.slice(1); }</code></pre> </div> </div> </div><p><a href="https://plnkr.co/edit/CrhVP5FvD2sH3zbE?p=preview" target="_blank" data-plunk-id="CrhVP5FvD2sH3zbE">Ouvrez la solution avec des tests dans une sandbox.</a></p></div></div><button class="close-button task__answer-close" type="button" title="fermer"></button></div></div></div></div></div></div><div class="page__nav-wrap"><a class="page__nav page__nav_prev" href="/number" data-tooltip="Nombres"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">Cours précédent</span></a><a class="page__nav page__nav_next" href="/array" data-tooltip="Arrays"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">Prochain cours</span></a></div><div class="article-tablet-foot tablet-only"><div class="article-tablet-foot__layout"><div class="share-icons"><span class="share-icons__title">Partager</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Ffr.javascript.info%2Fstring" rel="nofollow"></a><a class="share share_fb" href="https://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=https%3A%2F%2Ffr.javascript.info%2Fstring" rel="nofollow"></a></div><div class="article-tablet-foot__map"><a class="map" href="/tutorial/map" data-action="tutorial-map"><span class="map__text">Carte du tutoriel</span></a></div></div></div><div class="comments formatted" id="comments"><div class="comments__header"><h2 class="comments__header-title"><a href="#comments" name="comments">Commentaires</a></h2><div class="comments__read-before"><span class="comments__read-before-link">lire ceci avant de commenter…</span><div class="comments__read-before-popup"><div class="comments__read-before-popup-i"><ul><li>Si vous avez des améliorations à suggérer, merci de <a href="https://github.com/javascript-tutorial/en.javascript.info/issues/new">soumettre une issue GitHub</a> ou une pull request au lieu de commenter.</li><li>Si vous ne comprenez pas quelque chose dans l'article, merci de préciser.</li><li>Pour insérer quelques bouts de code, utilisez la balise <code><code></code>, pour plusieurs lignes – enveloppez-les avec la balise <code><pre></code>, pour plus de 10 lignes - utilisez une sandbox (<a href='https://plnkr.co/edit/?p=preview'>plnkr</a>, <a href='https://jsbin.com'>jsbin</a>, <a href='http://codepen.io'>codepen</a>…)</li></ul></div></div></div></div><div id="disqus_thread"></div><script>var disqus_config = function() { if (!this.page) this.page = {}; Object.assign(this.page, {"url":"https:\/\/fr.javascript.info\/string","identifier":"\/string"}); };</script><script>var disqus_shortname = "frjavascriptinfo";</script><script>var disqus_enabled = true;</script></div></script></main></div><div class="sidebar page__sidebar sidebar sidebar_sticky-footer"><button class="sidebar__toggle" data-sidebar-toggle></button><a class="map" href="/tutorial/map" data-action="tutorial-map" data-tooltip="Carte du tutoriel"></a><div class="sidebar__inner"><div class="sidebar__content"><div class="sidebar__section"><h4 class="sidebar__section-title">Chapitre</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="/data-types">Types de données</a></li></ul></nav></div><div class="sidebar__section"><h4 class="sidebar__section-title">Navigation des cours</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#quotes">Quotes</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#caracteres-speciaux">Caractères spéciaux</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#longueur-de-chaine-de-caracteres">Longueur de chaîne de caractères</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#acceder-aux-caracteres">Accéder aux caractères</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#les-chaines-de-caracteres-sont-immuables">Les chaînes de caractères sont immuables</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#modifier-la-casse">Modifier la casse</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#rechercher-un-substring-partie-de-la-chaine-de-caracteres">Rechercher un substring (partie de la chaîne de caractères)</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#obtenir-un-substring-sous-chaine-de-caracteres">Obtenir un substring (sous-chaîne de caractères)</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#comparer-les-strings">Comparer les strings</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#resume">Résumé</a></li></ul></nav></div><div class="sidebar__section"><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#tasks">Exercices (4)</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#comments">Commentaires</a></li></ul></nav></div><div class="sidebar__section"><div class="sidebar__section-title">Partager</div><a class="share share_tw sidebar__share" href="https://twitter.com/share?url=https%3A%2F%2Ffr.javascript.info%2Fstring" rel="nofollow"></a><a class="share share_fb sidebar__share" href="https://www.facebook.com/sharer/sharer.php?s=100&p[url]=https%3A%2F%2Ffr.javascript.info%2Fstring" rel="nofollow"></a></div><div class="sidebar__section"><a class="sidebar__link" href="https://github.com/javascript-tutorial/fr.javascript.info/blob/master/1-js/05-data-types/03-string" rel="nofollow">Editer sur GitHub</a></div></div></div></div></div></div><div class="page-footer"><ul class="page-footer__list"><li class="page-footer__item page-footer__item_copy">© 2007—2025  Ilya Kantor</li><li class="page-footer__item page-footer__item_about"><a class="page-footer__link" href="/about">à propos du projet</a></li><li class="page-footer__item page-footer__item_contact"><a class="page-footer__link" href="/about#contact-us">nous contacter</a></li></ul></div></body></html>