CINXE.COM

<!DOCTYPE html><html lang="uk" data-theme-enabled="1"><head><script>window.currentUser = null;</script><script>window.shopCurrency = "EUR";</script><script>window.localCurrency = "UAH";</script><script>window.countryCode = "ua";</script><script>window.rateShopTo = {"UAH":44.67590181922939,"EUR":1,"USD":1.078956993853182,"AMD":421.5874435300883};</script><title itemprop="name">Рядки</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://uk.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://uk.javascript.info/img/site_preview_en_512x512.png"><meta property="og:title" content="Рядки"><meta property="og:image" content="https://uk.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="Рядки"><meta name="twitter:site" content="@iliakan"><meta name="twitter:creator" content="@iliakan"><meta name="twitter:image" content="https://uk.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.2566f7f1af7ea730670b.js"></script><script src="/pack/head.3c29f3d0852906b2e722.js" defer></script><meta property="og:title" content="Рядки"><meta property="og:type" content="article"><script src="/pack/tutorial.e143b1654fa4e11cdd8b.js" defer></script><script src="/pack/footer.054c9dc1de8c0b8160eb.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 = "uk";</script><div class="sitetoolbar__content"><div class="sitetoolbar__lang-switcher"><button class="sitetoolbar__dropdown-button" data-dropdown-toggler>UK</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"><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 supported-langs__item_current"><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>Ми хочемо зробити цей проєкт з відкритим кодом доступним для людей у всьому світі.</p> <p><a href="https://javascript.info/translate">Допоможіть перекласти</a> цей підручник вашою мовою!</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">Купити</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="Змінити тему"><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="Пошук на Javascript.info" required="required" type="text"/></div><button class="sitetoolbar__find" type="submit">Пошук</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="Пошук у підручнику" required="required"/><button class="tablet-menu-search__button" type="submit" name="type" value="articles">Пошук</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">Навчальна карта</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="Змінити тему"><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">Світла тема</span><span class="theme-changer__label-text theme-changer__label-text_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">Поділитися</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Fuk.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%2Fuk.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">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" selected>Українська</option><option value="https://zh.javascript.info/string">简体中文</option></select></div></div></div><progress class="tutorial-progress" data-sticky value="39" max="94" data-tooltip="Урок 39 з 94"></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">Підручник</span></a></li><li class="breadcrumbs__item" id="breadcrumb-1"><a class="breadcrumbs__link" href="/js"><span>Мова програмування JavaScript</span></a></li><li class="breadcrumbs__item" id="breadcrumb-2"><a class="breadcrumbs__link" href="/data-types"><span>Типи даних</span></a></li><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Підручник","item":"https://uk.javascript.info/"},{"@type":"ListItem","position":2,"name":"Мова програмування JavaScript","item":"https://uk.javascript.info/js"},{"@type":"ListItem","position":3,"name":"Типи даних","item":"https://uk.javascript.info/data-types"}]}</script></ol><div class="updated-at" data-tooltip="Останнє оновлення: 20 лютого 2024 р."><div class="updated-at__content">20 лютого 2024 р.</div></div></div><h1 class="main__header-title">Рядки</h1></div></header><div class="content"><article class="formatted" itemscope itemtype="http://schema.org/TechArticle"><meta itemprop="name" content="Рядки"><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>У JavaScript текстові дані зберігаються у вигляді рядків. Не існує окремого типу для одного символу.</p> <p>Внутрішній формат для рядків завжди <a href="https://uk.wikipedia.org/wiki/UTF-16">UTF-16</a>, він не привʼязаний до кодування сторінки.</p> <h2><a class="main__anchor" name="lapki" href="#lapki">Лапки</a></h2><p>Згадаймо види лапок.</p> <p>Рядки можуть бути включені в одинарні лапки, подвійні лапки або зворотні знаки:</p> <div id="49x2swup1a" 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 = 'одинарні-лапки'; let double = "подвійні-лапки"; let backticks = `зворотні-лапки`;</code></pre> </div> </div> </div><p>Одинарні та подвійні лапки по суті однакові. Однак зворотні лапки дозволяють нам вставляти будь-який вираз у рядок, загортаючи його у <code>${…}</code>:</p> <div id="eqt4d8ao2x" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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>Ще однією перевагою використання зворотних лапок є те, що вони дозволяють рядку охоплювати кілька ліній:</p> <div id="ghqxaugrw6" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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 = `Гості: * Іван * Петро * Марія `; alert(guestList); // список гостей в кілька рядків</code></pre> </div> </div> </div><p>Виглядає природно, правда? Але одинарні або подвійні лапки так не працюють.</p> <p>Якщо ми спробуємо їх використати в кілька рядків, буде помилка:</p> <div id="rdqbn8qqsl" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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 = "Гості: // Помилка: Unexpected token ILLEGAL * Іван";</code></pre> </div> </div> </div><p>Одинарні та подвійні лапки беруть свій початок з давніх часів створення мови, коли не було потреби у багатолінійних рядках. Зворотні лапки зʼявилися набагато пізніше і тому є більш універсальними.</p> <p>Зворотні лапки також дозволяють нам задати “шаблонну функцію” перед першими зворотніми лапками. Синтаксис такий: <code>func`string`</code>. Функція <code>func</code> викликається автоматично, отримує рядок і вбудовані в неї вирази і може їх обробити. Це називається “теговим шаблоном”, це рідко використовується на практиці, але ви можете прочитати детальніше про це на MDN: <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates">Template literals</a>.</p> <h2><a class="main__anchor" name="specialni-simvoli" href="#specialni-simvoli">Спеціальні символи</a></h2><p>Ще можна створити багатолінійні рядки з одинарними та подвійними лапками за допомогою так званого “символу нового рядка”, записаного як <code>\n</code>, який позначає розрив рядка:</p> <div id="zbp7c8uj8w" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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 = "Гості:\n * Іван\n * Петро\n * Марія"; alert(guestList); // список гостей в декілька рядків, як і вище</code></pre> </div> </div> </div><p>Наприклад, ці два рядки рівнозначні, просто написані по-різному:</p> <div id="fsuo5xk4lr" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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 = "Привіт\nСвіт"; // два рядки з використанням "символу нового рядка" // два рядки з використанням звичайного нового рядка та зворотних лапок let str2 = `Привіт Світ`; alert(str1 == str2); // true</code></pre> </div> </div> </div><p>Є й інші, менш поширені “спеціальні” символи.</p> <table> <thead> <tr> <th>Символ</th> <th>Опис</th> </tr> </thead> <tbody> <tr> <td><code>\n</code></td> <td>Розрив рядка</td> </tr> <tr> <td><code>\r</code></td> <td>У текстових файлах Windows комбінація двох символів <code>\r\n</code> являє собою розрив рядка, тоді як в інших ОС, це просто <code>\n</code>. Так склалось з історичних причин, більшість ПЗ під Windows також розуміє <code>\n</code></td> </tr> <tr> <td><code>\'</code>, <code>\"</code>, <code>\`</code></td> <td>Лапки</td> </tr> <tr> <td><code>\\</code></td> <td>Зворотний слеш</td> </tr> <tr> <td><code>\t</code></td> <td>Знак табуляції</td> </tr> <tr> <td><code>\b</code>, <code>\f</code>, <code>\v</code></td> <td>Backspace, Form Feed, Vertical Tab – зберігаються для зворотної сумісності, зараз не використовуються</td> </tr> </tbody> </table> <p>Усі спеціальні символи починаються зі зворотного слеша <code>\</code>. Його також називають “символом екранування”.</p> <p>Оскільки це так особливо, якщо нам потрібно показати зворотний слеш <code>\</code> у рядку, нам потрібно подвоїти його:</p> <div id="snv4r8lcfv" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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( `Зворотний слеш: \\` ); // Зворотний слеш: \</code></pre> </div> </div> </div><p>Так звані “екрановані” лапки <code>\'</code>, <code>\"</code>, <code>\`</code> використовуються для вставки цих лапок в рядок, який обмежено таким же типом лапок.</p> <p>Наприклад:</p> <div id="dfi8bzw2fr" data-trusted="1" class="code-example" data-highlight="[{"start":0,"cols":[{"start":10,"end":12},{"start":33,"end":37}]}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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( 'Ім\'я моє — Морж!' ); // Ім'я моє — Морж!</code></pre> </div> </div> </div><p>Як бачите, ми повинні “екранувати” лапку зворотним слешем <code>\'</code>, оскільки інакше це означало б кінець рядка.</p> <p>Звісно, потрібно “екранувати” лише такі лапки, якими обрамлений рядок. Як елегантніше рішення, ми могли б замість цього скористатися подвійними або зворотними лапками:</p> <div id="s3v9sygfru" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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( `Ім'я моє — Морж!` ); // Ім'я моє — Морж!</code></pre> </div> </div> </div><p>Окрім цих спеціальних символів, існує також спеціальна нотація для кодів Unicode <code>\u…</code>, вона використовується рідко та описана в додатковому розділі про <a href="/unicode">Unicode</a>.</p> <h2><a class="main__anchor" name="dovzhina-ryadka" href="#dovzhina-ryadka">Довжина рядка</a></h2><p>Властивість <code>length</code> містить в собі довжину рядка:</p> <div id="y7phtj77gl" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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( `Моє\n`.length ); // 4</code></pre> </div> </div> </div><p>Зверніть увагу, що <code>\n</code> – це один спеціальний символ, тому довжина рівна <code>4</code>.</p> <div class="important important_warn"> <div class="important__header"><span class="important__type"><code>length</code> – це властивість</span></div> <div class="important__content"><p>Люди з досвідом роботи в інших мовах випадково намагаються викликати властивість, додаючи круглі дужки: вони пишуть <code>str.length()</code> замість <code>str.length</code>. Це не спрацює.</p> <p>Зверніть увагу, що <code>str.length</code> – це числове значення, а не функція, додавати дужки не потрібно. Не <code>.length()</code>, а <code>.length</code>.</p> </div></div> <h2><a class="main__anchor" name="dostup-do-simvoliv" href="#dostup-do-simvoliv">Доступ до символів</a></h2><p>Отримати символ, котрий займає позицію <code>pos</code>, можна за допомогою квадратних дужок: <code>[pos]</code>, або викликати метод <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/String/at">str.at(pos)</a>. Перший символ займає нульову позицію:</p> <div id="y6qq60m3x4" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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 = `Привіт`; // перший символ alert( str[0] ); // П alert( str.charAt(0) ); // П // останній символ alert( str[str.length - 1] ); // т alert( str.at(-1) );</code></pre> </div> </div> </div><p>Як бачите, перевага методу <code>.at(pos)</code> полягає в тому, що він допускає від’ємну позицію. Якщо <code>pos</code> від’ємне число, тоді позиція відраховується з кінця рядка.</p> <p>Отже, <code>.at(-1)</code> означає останній символ, а <code>.at(-2)</code> – передостанній, тощо.</p> <p>Квадратні дужки завжди повертають <code>undefined</code> для від’ємних індексів, наприклад:</p> <div id="xykauew5ut" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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 = `Привіт`; alert( str[-2] ); // undefined alert( str.at(-2) ); // і</code></pre> </div> </div> </div><p>Ми також можемо перебрати рядок посимвольно, використовуючи <code>for..of</code>:</p> <div id="1nzzplf3ed" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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 "Привіт") { alert(char); // П,р,и,в,і,т (char — спочатку "П", потім "р", потім "и" і так далі) }</code></pre> </div> </div> </div><h2><a class="main__anchor" name="ryadki-nezminni" href="#ryadki-nezminni">Рядки незмінні</a></h2><p>В JavaScript рядки не можна змінювати. Змінити символ неможливо.</p> <p>Спробуємо показати на прикладі:</p> <div id="wpk12y3jnq" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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 = 'Ой'; str[0] = 'о'; // помилка alert( str[0] ); // не працює</code></pre> </div> </div> </div><p>Можна створити новий рядок замість старого, записавши його в ту саму змінну.</p> <p>Ось так:</p> <div id="j1v2mglrvv" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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 = 'Ой'; str = 'о' + str[1]; // замінюємо рядок alert( str ); // ой</code></pre> </div> </div> </div><p>В наступних розділах ми побачимо більше прикладів.</p> <h2><a class="main__anchor" name="zmina-registru" href="#zmina-registru">Зміна регістру</a></h2><p>Методи <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase">toLowerCase()</a> та <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase">toUpperCase()</a> змінюють регістр символів:</p> <div id="7mjqduywnm" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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( 'Інтерфейс'.toUpperCase() ); // ІНТЕРФЕЙС alert( 'Інтерфейс'.toLowerCase() ); // інтерфейс</code></pre> </div> </div> </div><p>Або якщо ми хочемо перенести в нижній регістр конкретний символ:</p> <div id="c94akr7vo4" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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() ); // 'і'</code></pre> </div> </div> </div><h2><a class="main__anchor" name="poshuk-pidryadka" href="#poshuk-pidryadka">Пошук підрядка</a></h2><p>Існує декілька способів для пошуку підрядка.</p> <h3><a class="main__anchor" name="str-indexof" href="#str-indexof">str.indexOf</a></h3><p>Перший метод – <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">str.indexOf(substr, pos)</a>.</p> <p>Він шукає підрядок <code>substr</code> в рядку <code>str</code>, починаючи з позиції <code>pos</code>, і повертає позицію, де знаходиться збіг, або <code>-1</code> якщо збігів не було знайдено.</p> <p>Наприклад:</p> <div id="ibz1a1r7ch" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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 = 'Віджет з ідентифікатором'; alert( str.indexOf('Віджет') ); // 0, тому що 'Віджет' було знайдено на початку alert( str.indexOf('віджет') ); // -1, збігів не знайдено, пошук чутливий до регістру alert( str.indexOf("ід") ); // 1, підрядок "ід" знайдено на позиції 1 (..іджет з ідентифікатором)</code></pre> </div> </div> </div><p>Необовʼязковий другий параметр <code>pos</code> дозволяє нам почати пошук із заданої позиції.</p> <p>Наприклад, перший збіг <code>"ід"</code> знаходиться на позиції <code>1</code>. Щоб знайти наступний збіг, почнемо пошук з позиції <code>2</code>:</p> <div id="y9yfqmlrzx" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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 = 'Віджет з ідентифікатором'; alert( str.indexOf('ід', 2) ) // 9</code></pre> </div> </div> </div><p>Щоб знайти усі збіги, нам потрібно запустити <code>indexOf</code> в циклі. Кожен новий виклик здійснюється з позицією після попереднього збігу:</p> <div id="x5ug75nz4s" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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 = 'Хитрий, як лисиця, сильний, як Як'; let target = 'як'; // давайте знайдемо це let pos = 0; while (true) { let foundPos = str.indexOf(target, pos); if (foundPos == -1) break; alert( `Знайдено тут: ${foundPos}` ); pos = foundPos + 1; // продовжуємо з наступної позиції }</code></pre> </div> </div> </div><p>Той самий алгоритм можна записати коротше:</p> <div id="63r9gr39vr" 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="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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 = "Хитрий, як лисиця, сильний, як Як"; let target = "як"; 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(substr, position)</code></span></div> <div class="important__content"><p>Також є схожий метод <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf">str.lastIndexOf(substr, position)</a>, що виконує пошук від кінця рядка до його початку.</p> <p>У ньому будуть перераховані збіги в зворотному порядку.</p> </div></div> <p>Існує незручність з <code>indexOf</code> в умові <code>if</code>. Ми не можемо помістити його в <code>if</code> таким чином:</p> <div id="wxxsycrlbl" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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 = "Віджет з ідентифікатором"; if (str.indexOf("Віджет")) { alert("Є співпадіння"); // не працює }</code></pre> </div> </div> </div><p>В прикладі вище <code>alert</code> не відображається, оскільки <code>str.indexOf("Віджет")</code> повертає <code>0</code> (це означає, що він знайшов збіг у початковій позиції). Це правильно, але <code>if</code> вважає, що <code>0</code> – це <code>false</code>.</p> <p>Тому нам потрібно робити перевірку на <code>-1</code>, як тут:</p> <div id="1vz3bj2d11" 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="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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 = "Віджет з ідентифікатором"; if (str.indexOf("Віджет") != -1) { alert("Є співпадіння"); // тепер працює! }</code></pre> </div> </div> </div><h3><a class="main__anchor" name="includes-startswith-endswith" href="#includes-startswith-endswith">includes, startsWith, endsWith</a></h3><p>Сучасніший метод <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/String/includes">str.includes(substr, pos)</a> повертає <code>true/false</code> в залежності від того чи є <code>substr</code> в рядку <code>str</code>.</p> <p>Цей метод доцільно використовувати, коли потрібно перевірити чи є збіг, але не потрібна позиція:</p> <div id="nwfd66trsi" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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( "Віджет з ідентифікатором".includes("Віджет") ); // true alert( "Привіт".includes("Бувай") ); // false</code></pre> </div> </div> </div><p>Необовʼязковий другий аргумент <code>pos</code> – це позиція з якої почнеться пошук:</p> <div id="8dnm2a0aem" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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( "Віджет".includes("ід") ); // true alert( "Віджет".includes("ід", 3) ); // false, починаючи з 3-го символа, підрядка "ід" немає</code></pre> </div> </div> </div><p>Відповідно, методи <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith">str.startsWith</a> та <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith">str.endsWith</a> перевіряють, чи починається і чи закінчується рядок певним підрядком.</p> <div id="ot3twln3rx" 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="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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( "Віджет".startsWith("Від") ); // true, "Віджет" починається з "Від" alert( "Віджет".endsWith("жет") ); // true, "Віджет" закінчується підрядком "жет"</code></pre> </div> </div> </div><h2><a class="main__anchor" name="otrimannya-pidryadka" href="#otrimannya-pidryadka">Отримання підрядка</a></h2><p>В JavaScript є 3 метода для отримання підрядка: <code>substring</code>, <code>substr</code> та <code>slice</code>.</p> <dl> <dt><code>str.slice(start [, end])</code></dt> <dd> <p>Повертає частину рядка починаючи від <code>start</code> до (але не включно) <code>end</code>.</p> <p>Наприклад:</p> <div id="u55oogep8s" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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', підрядок від 0 до 5 (5 не включно) alert( str.slice(0, 1) ); // 's', від 0 до 1, але 1 не включно, тому лише символ на позиції 0</code></pre> </div> </div> </div><p>Якщо другий аргумент відсутній, тоді <code>slice</code> поверне символи до кінця рядка:</p> <div id="6zxkbpoxwy" 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="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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', з позиції 2 і до кінця</code></pre> </div> </div> </div><p>Також для <code>start/end</code> можна задати відʼємне значення. Це означає, що позиція буде рахуватися з кінця рядка:</p> <div id="7j4b9mv3cf" 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="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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"; // починаємо з 4-го символа справа, і закінчуємо на 1-му символі справа alert( str.slice(-4, -1) ); // 'gif'</code></pre> </div> </div> </div></dd> <dt><code>str.substring(start [, end])</code></dt> <dd> <p>Повертає частину рядка <em>між</em> <code>start</code> та <code>end</code> (не включаючи <code>end</code>)…</p> <p>Цей метод майже такий самий що і <code>slice</code>, але він дозволяє задати <code>start</code> більше ніж <code>end</code> (у цьому випадку він просто міняє значення <code>start</code> і <code>end</code> місцями).</p> <p>Наприклад:</p> <div id="h3wqsgy50b" 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="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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"; // для substring ці два приклади однакові alert( str.substring(2, 6) ); // "ring" alert( str.substring(6, 2) ); // "ring" // ...але не для slice: alert( str.slice(2, 6) ); // "ring" (те саме) alert( str.slice(6, 2) ); // "" (порожній рядок)</code></pre> </div> </div> </div><p>Відʼємні аргументи (на відміну від slice) не підтримуються, вони інтерпретуються як <code>0</code>.</p> </dd> <dt><code>str.substr(start [, length])</code></dt> <dd> <p>Повертає частину рядка з позиції <code>start</code>, із заданою довжиною <code>length</code>.</p> <p>На відміну від попередніх методів, цей дозволяє вказати довжину <code>length</code> замість кінцевої позиції:</p> <div id="a3vwifiyry" 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="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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', починаючи з позиції 2 отримуємо 4 символа</code></pre> </div> </div> </div><p>Перший аргумент може бути відʼємним, щоб рахувати з кінця:</p> <div id="thv7qxy3vj" 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="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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', починаючи з позиції 4 з кінця отримуєму 2 символа</code></pre> </div> </div> </div><p>Цей метод міститься в <a href="https://tc39.es/ecma262/#sec-string.prototype.substr">Annex B</a> специфікації мови. Це означає, що лише рушії браузерного Javascript мають його підтримувати, і не рекомендується його використовувати. На практиці це підтримується всюди.</p> </dd> </dl> <p>Давайте підсумуємо ці методи щоб не заплутатись:</p> <table> <thead> <tr> <th>Метод</th> <th>вибирає…</th> <th>відʼємні значення</th> </tr> </thead> <tbody> <tr> <td><code>slice(start, end)</code></td> <td>від <code>start</code> до <code>end</code> (не включаючи <code>end</code>)</td> <td>дозволяє відʼємні значення</td> </tr> <tr> <td><code>substring(start, end)</code></td> <td>між <code>start</code> та <code>end</code> (не включаючи <code>end</code>)</td> <td>відʼємні значення інтерпретуються як <code>0</code></td> </tr> <tr> <td><code>substr(start, length)</code></td> <td><code>length</code> символів від <code>start</code></td> <td>дозволяє відʼємні значення <code>start</code></td> </tr> </tbody> </table> <div class="important important_smart"> <div class="important__header"><span class="important__type">Який метод вибрати?</span></div> <div class="important__content"><p>Усі вони можуть виконати задачу. Формально <code>substr</code> має незначний недолік: він описаний не в основній специфікації JavaScript, а в Annex B, який охоплює лише функції браузера, які існують переважно з історичних причин. Тому не браузерні середовища, можуть не підтримувати його. Але на практиці це працює всюди.</p> <p>З двох інших варіантів <code>slice</code> дещо гнучкіший, він допускає від’ємні аргументи та коротший в записі.</p> <p>Отже, достатньо запамʼятати лише <code>slice</code> з цих трьох методів.</p> </div></div> <h2><a class="main__anchor" name="porivnyannya-ryadkiv" href="#porivnyannya-ryadkiv">Порівняння рядків</a></h2><p>Як ми знаємо з розділу <a href="/comparison">Оператори порівняння</a>, рядки порівнюються символ за символом в алфавітному порядку.</p> <p>Хоча, є деякі дивацтва.</p> <ol> <li> <p>Літера в малому регістрі завжди більша за літеру у великому:</p> <div id="x721xzsr4x" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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>Літери з діакритичними знаками “не в порядку”:</p> <div id="bb0jfimz6m" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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>Це може призвести до дивних результатів, якщо ми відсортуємо ці назви країн. Зазвичай люди очікують, що <code>Zealand</code> буде після <code>Österreich</code>.</p> </li> </ol> <p>Щоб зрозуміти, що відбувається, давайте розглянемо внутрішнє представлення рядків у JavaScript закодованих за допомогою <a href="https://uk.wikipedia.org/wiki/UTF-16">UTF-16</a>. Тобто: кожен символ має відповідний числовий код…</p> <p>Існують спеціальні методи, які дозволяють отримати символ по коду і навпаки.</p> <dl> <dt><code>str.codePointAt(pos)</code></dt> <dd> <p>Повертає десяткове число, що є кодом символу на позиції <code>pos</code>:</p> <div id="oe7kx2merg" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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( "z".codePointAt(0) ); // 122 alert( "Z".codePointAt(0) ); // 90 alert( "z".codePointAt(0) ); // 122 alert( "z".codePointAt(0).toString(16) ); // 7a (if we need a hexadecimal value)</code></pre> </div> </div> </div></dd> <dt><code>String.fromCodePoint(code)</code></dt> <dd> <p>Створює символ за його кодом <code>code</code></p> <div id="liv4ipmfhy" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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 (ми також можемо використовувати шістнадцяткове значення як аргумент)</code></pre> </div> </div> </div></dd> </dl> <p>Тепер давайте подивимося на символи з кодами <code>65..220</code> (латинський алфавіт і трохи більше), створивши з них рядок:</p> <div id="l71v3nqcig" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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>Бачите? Спочатку вводяться великі символи, потім кілька спеціальних, потім символи нижнього регістру та <code>Ö</code> ближче до кінця виводу.</p> <p>Тепер стає очевидним, чому <code>a > Z</code>.</p> <p>Символи порівнюються за їх числовим кодом. Більший код означає, що символ більше. Код для <code>a</code> (97) більший за код для <code>Z</code> (90).</p> <ul> <li>Усі малі літери йдуть після великих, оскільки їхні коди більші.</li> <li>Деякі літери, як-от <code>Ö</code>, стоять окремо від основного алфавіту. Тут його код більший за будь-що від <code>a</code> до <code>z</code>.</li> </ul> <h3><a class="main__anchor" name="correct-comparisons" href="#correct-comparisons">Правильне порівняння</a></h3><p>«Правильний» алгоритм порівняння рядків є складнішим, ніж може здатися, тому що для різних мов – різні алфавіти.</p> <p>Отже, браузеру потрібно знати, яку мову використовувати для порівняння.</p> <p>На щастя, усі сучасні браузери підтримують стандарт інтернаціоналізації <a href="https://www.ecma-international.org/publications-and-standards/standards/ecma-402/">ECMA-402</a>.</p> <p>Він забезпечує спеціальний метод для порівняння рядків різними мовами, дотримуючись їхніх правил.</p> <p>Виклик <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare">str.localeCompare(str2)</a> повертає ціле число, яке вказує, чи є <code>str</code> меншим, рівним чи більшим за <code>str2</code> відповідно до правил мови:</p> <ul> <li>Повертає відʼємне число, якщо <code>str</code> менше, ніж <code>str2</code>.</li> <li>Повертає додатне число, якщо <code>str</code> більше, ніж <code>str2</code>.</li> <li>Повертає <code>0</code>, якщо вони рівні.</li> </ul> <p>Наприклад:</p> <div id="3ioyt4sb0w" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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>Цей метод насправді має два додаткові аргументи, зазначені в <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare">документації</a>, що дозволяє йому вказати мову (типово взяту з середовища, порядок букв залежить від мови) і встановити додаткові правила, як-от чутливість до регістру або чи слід розглядати різницю між <code>"a"</code> та <code>"á"</code>.</p> <h2><a class="main__anchor" name="pidsumki" href="#pidsumki">Підсумки</a></h2><ul> <li>Є 3 види лапок. Зворотні лапки дозволяють рядку охоплювати кілька ліній і застосовувати вбудовувані вирази <code>${…}</code>.</li> <li>Ми можемо використовувати спеціальні символи, такі як розрив рядка <code>\n</code>.</li> <li>Щоб отримати символ, використовуйте: <code>[]</code> або метод <code>at</code>.</li> <li>Щоб отримати підрядок, використовуйте: <code>slice</code> або <code>substring</code>.</li> <li>Щоб перевести рядок у нижній/верхній регістри, використовуйте: <code>toLowerCase/toUpperCase</code>.</li> <li>Щоб знайти підрядок, використовуйте: <code>indexOf</code>, або <code>includes/startsWith/endsWith</code> для простих перевірок.</li> <li>Щоб порівняти рядки з урахуванням правил мови, використовуйте: <code>localeCompare</code>, інакше вони порівнюються за кодами символів.</li> </ul> <p>Є кілька інших корисних методів у рядках:</p> <ul> <li><code>str.trim()</code> – видаляє (“обрізає”) пробіли з початку та кінця рядка.</li> <li><code>str.repeat(n)</code> – повторює рядок <code>n</code> разів.</li> <li>…та багато іншого можна знайти в <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/String">посібнику</a>.</li> </ul> <p>Рядки також мають методи пошуку/заміни регулярними виразами. Але це велика тема, тому пояснюється в окремому розділі <a href="/regular-expressions">Регулярні вирази</a>.</p> <p>Крім того, на даний момент важливо знати, що рядки базуються на кодуванні Unicode, і тому виникають проблеми з порівнянням, які ми описали вище. Більше про Unicode у розділі <a href="/unicode">Юнікод, внутрішня будова рядків</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">Завдання</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="#perevedit-pershii-simvol-u-verkhnii-registr" name="perevedit-pershii-simvol-u-verkhnii-registr">Переведіть перший символ у верхній регістр</a></h3><a class="task__open-link" href="/task/ucfirst" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="Наскільки важливим є завдання, від 1 до 5">важливість: 5</span></div><div class="task__content"><div class="task__formatted"><p>Напишіть функцію <code>ucFirst(str)</code>, яка повертає рядок <code>str</code> з першим символом у верхньому регістрі, наприклад:</p> <div id="0ox7xt7drz" 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("василь") == "Василь";</code></pre> </div> </div> </div><p><a href="https://plnkr.co/edit/KvJOrGrMs5xOfnfB?p=preview" target="_blank" data-plunk-id="KvJOrGrMs5xOfnfB">Відкрити пісочницю з тестами.</a></p></div><button class="task__solution" type="button">рішення</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><p>Ми не можемо “замінити” перший символ, оскільки рядки в JavaScript незмінні.</p> <p>Але ми можемо створити новий рядок на основі існуючого, з першим символом у верхньому регістрі:</p> <div id="9wob8fbibg" 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>Але є невелика проблема. Якщо <code>str</code> порожній рядок, то <code>str[0]</code> буде <code>undefined</code>, а оскільки <code>undefined</code> не має методу <code>toUpperCase()</code>, ми отримаємо помилку.</p> <p>Найпростіший спосіб – додати перевірку на порожній рядок, наприклад ось так:</p> <div id="zbcriq51b9" 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="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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("василь") ); // Василь</code></pre> </div> </div> </div><p><a href="https://plnkr.co/edit/6X8zplIxZrNTMfhB?p=preview" target="_blank" data-plunk-id="6X8zplIxZrNTMfhB">Відкрити рішення із тестами в пісочниці.</a></p></div></div><button class="close-button task__answer-close" type="button" title="закрити"></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="#perevirka-na-spam" name="perevirka-na-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="Наскільки важливим є завдання, від 1 до 5">важливість: 5</span></div><div class="task__content"><div class="task__formatted"><p>Напишіть функцію <code>checkSpam(str)</code>, яка повертає <code>true</code>, якщо <code>str</code> містить ‘viagra’ or ‘XXX’, інакше <code>false</code>.</p> <p>Функція має бути нечутливою до регістру:</p> <div id="tjj09xo8wv" 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/vEpo86qjP1chxTGP?p=preview" target="_blank" data-plunk-id="vEpo86qjP1chxTGP">Відкрити пісочницю з тестами.</a></p></div><button class="task__solution" type="button">рішення</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><p>Щоб зробити пошук нечутливим до регістру, давайте переведемо рядок у нижній регістр, а потім здійснимо пошук:</p> <div id="ub5ck870tb" 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="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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/qpTqUbWKLdsSkEGY?p=preview" target="_blank" data-plunk-id="qpTqUbWKLdsSkEGY">Відкрити рішення із тестами в пісочниці.</a></p></div></div><button class="close-button task__answer-close" type="button" title="закрити"></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="#urizannya-tekstu" name="urizannya-tekstu">Урізання тексту</a></h3><a class="task__open-link" href="/task/truncate" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="Наскільки важливим є завдання, від 1 до 5">важливість: 5</span></div><div class="task__content"><div class="task__formatted"><p>Створіть функцію <code>truncate(str, maxlength)</code>, яка перевіряє довжину <code>str</code> і, якщо вона перевищує <code>maxlength</code> – замінює кінець <code>str</code> символом трьох крапок <code>"…"</code>, щоб його довжина була рівною <code>maxlength</code>.</p> <p>Результатом функції повинен бути урізаний (якщо потребується) рядок.</p> <p>Наприклад:</p> <div id="87cx6myo3r" 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("Що я хотів би розповісти на цю тему:", 20) == "Що я хотів би розпо…" truncate("Всім привіт!", 20) == "Всім привіт!"</code></pre> </div> </div> </div><p><a href="https://plnkr.co/edit/4pVvYFIZXxSQPffF?p=preview" target="_blank" data-plunk-id="4pVvYFIZXxSQPffF">Відкрити пісочницю з тестами.</a></p></div><button class="task__solution" type="button">рішення</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><p>Максимальна довжина має бути <code>maxlength</code>, тому нам потрібно її трохи обрізати, щоб дати місце для символу трьох крапок.</p> <p>Зауважте, що насправді існує один юнікодний символ для “трьох крапок”. Це не три послідовні крапки.</p> <div id="ge1nemvo32" 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="запустити" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="відкрити в пісочниці" 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><p><a href="https://plnkr.co/edit/QyUBiscMRdSkMw59?p=preview" target="_blank" data-plunk-id="QyUBiscMRdSkMw59">Відкрити рішення із тестами в пісочниці.</a></p></div></div><button class="close-button task__answer-close" type="button" title="закрити"></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="#vidilit-groshi" name="vidilit-groshi">Виділіть гроші</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="Наскільки важливим є завдання, від 1 до 5">важливість: 4</span></div><div class="task__content"><div class="task__formatted"><p>У нас є вартість у вигляді <code>"$120"</code>. Тобто: спочатку йде знак долара, а потім число.</p> <p>Створіть функцію <code>extractCurrencyValue(str)</code>, яка витягне числове значення з такого рядка та поверне його.</p> <p>Приклад:</p> <div id="2wr06q7u8n" 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/2p4c5c9bJ37gtjAC?p=preview" target="_blank" data-plunk-id="2p4c5c9bJ37gtjAC">Відкрити пісочницю з тестами.</a></p></div><button class="task__solution" type="button">рішення</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><div id="lgokn9mufj" 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/EzRNMLCHg25Pi0pN?p=preview" target="_blank" data-plunk-id="EzRNMLCHg25Pi0pN">Відкрити рішення із тестами в пісочниці.</a></p></div></div><button class="close-button task__answer-close" type="button" title="закрити"></button></div></div></div></div></div></div><div class="page__nav-wrap"><a class="page__nav page__nav_prev" href="/number" data-tooltip="Числа"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">Попередній урок</span></a><a class="page__nav page__nav_next" href="/array" data-tooltip="Масиви"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">Наступний урок</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">Поділитися</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Fuk.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%2Fuk.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">Навчальна карта</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">Коментарі</a></h2><div class="comments__read-before"><span class="comments__read-before-link">прочитайте це, перш ніж коментувати…</span><div class="comments__read-before-popup"><div class="comments__read-before-popup-i"><ul><li>Якщо у вас є пропозиції, щодо покращення підручника, будь ласка, <a href="https://github.com/javascript-tutorial/uk.javascript.info/issues/new">створіть обговорення на GitHub</a> або одразу створіть запит на злиття зі змінами.</li><li>Якщо ви не можете зрозуміти щось у статті, спробуйте покращити її, будь ласка.</li><li>Щоб вставити код, використовуйте тег <code><code></code>, для кількох рядків – обгорніть їх тегом <code><pre></code>, для понад 10 рядків – використовуйте пісочницю (<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:\/\/uk.javascript.info\/string","identifier":"\/string"}); };</script><script>var disqus_shortname = "uk-javascript-info";</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="Навчальна карта"></a><div class="sidebar__inner"><div class="sidebar__content"><div class="sidebar__section"><h4 class="sidebar__section-title">Глава</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="/data-types">Типи даних</a></li></ul></nav></div><div class="sidebar__section"><h4 class="sidebar__section-title">Навігація по уроку</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#lapki">Лапки</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#specialni-simvoli">Спеціальні символи</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#dovzhina-ryadka">Довжина рядка</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#dostup-do-simvoliv">Доступ до символів</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ryadki-nezminni">Рядки незмінні</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#zmina-registru">Зміна регістру</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#poshuk-pidryadka">Пошук підрядка</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#otrimannya-pidryadka">Отримання підрядка</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#porivnyannya-ryadkiv">Порівняння рядків</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#pidsumki">Підсумки</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">Завдання (4)</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#comments">Коментарі</a></li></ul></nav></div><div class="sidebar__section"><div class="sidebar__section-title">Поділитися</div><a class="share share_tw sidebar__share" href="https://twitter.com/share?url=https%3A%2F%2Fuk.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%2Fuk.javascript.info%2Fstring" rel="nofollow"></a></div><div class="sidebar__section"><a class="sidebar__link" href="https://github.com/javascript-tutorial/uk.javascript.info/blob/master/1-js/05-data-types/03-string" rel="nofollow">Редагувати на 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  Ілля Кантор</li><li class="page-footer__item page-footer__item_about"><a class="page-footer__link" href="/about">про проєкт</a></li><li class="page-footer__item page-footer__item_contact"><a class="page-footer__link" href="/about#contact-us">зв’яжіться з нами</a></li></ul></div></body></html>