CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>Handling text — strings in JavaScript - Learn web development | MDN</title><link rel="alternate" title="Umgang mit Text — Zeichenketten in JavaScript" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Scripting/Strings" hrefLang="de"/><link rel="alternate" title="Manejar texto — cadenas en JavaScript" href="https://developer.mozilla.org/es/docs/Learn_web_development/Core/Scripting/Strings" hrefLang="es"/><link rel="alternate" title="Gérer du texte — les chaînes de caractères en JavaScript" href="https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Scripting/Strings" hrefLang="fr"/><link rel="alternate" title="テキストの扱い — JavaScript での文字列" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Scripting/Strings" hrefLang="ja"/><link rel="alternate" title="문자열 다루기 — 문자열" href="https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Scripting/Strings" hrefLang="ko"/><link rel="alternate" title="Trabalhando com texto — strings em JavaScript" href="https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Core/Scripting/Strings" hrefLang="pt"/><link rel="alternate" title="Работа с текстом — строки в JavaScript" href="https://developer.mozilla.org/ru/docs/Learn_web_development/Core/Scripting/Strings" hrefLang="ru"/><link rel="alternate" title="文本处理——JavaScript 中的字符串" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scripting/Strings" hrefLang="zh"/><link rel="alternate" title="處理文字 - JavaScript中的字串" href="https://developer.mozilla.org/zh-TW/docs/Learn_web_development/Core/Scripting/Strings" hrefLang="zh-Hant"/><link rel="alternate" title="Handling text — strings in JavaScript" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Strings" hrefLang="en"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="Next, we'll turn our attention to strings — this is what pieces of text are called in programming. In this article, we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in strings, and joining strings together."/><meta property="og:url" content="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Strings"/><meta property="og:title" content="Handling text — strings in JavaScript - Learn web development | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="en_US"/><meta property="og:description" content="Next, we'll turn our attention to strings — this is what pieces of text are called in programming. In this article, we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in strings, and joining strings together."/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Strings"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.f565372a.js"></script><link href="/static/css/main.3d9e7a02.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-javascript document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/en-US/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/en-US/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/en-US/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/en-US/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/en-US/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/en-US/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/en-US/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/en-US/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class=" "><a href="/en-US/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Build web projects usable for all</p></div></a></li><li class="apis-link-container desktop-only "><a href="/en-US/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container active"><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/en-US/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/en-US/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/en-US/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/en-US/docs/Learn_web_development/Core/Structuring_content" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/en-US/docs/Learn_web_development/Core/Styling_basics" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/en-US/docs/Learn_web_development/Core/Scripting" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/en-US/docs/Learn_web_development/Core/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/en-US/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/en-US/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/en-US/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/en-US/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/en-US/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FStrings" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FStrings" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Learn_web_development" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Learn</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Learn_web_development/Core" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Core learning modules</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Learn_web_development/Core/Scripting" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Dynamic scripting with JavaScript</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Learn_web_development/Core/Scripting/Strings" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">Handling text — strings in JavaScript</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>English (US)</span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="de" href="/de/docs/Learn_web_development/Core/Scripting/Strings" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li><li class=" "><a data-locale="es" href="/es/docs/Learn_web_development/Core/Scripting/Strings" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Learn_web_development/Core/Scripting/Strings" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Learn_web_development/Core/Scripting/Strings" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Learn_web_development/Core/Scripting/Strings" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="pt-BR" href="/pt-BR/docs/Learn_web_development/Core/Scripting/Strings" class="button submenu-item"><span>Português (do Brasil)</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Learn_web_development/Core/Scripting/Strings" class="button submenu-item"><span>Русский</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn_web_development/Core/Scripting/Strings" class="button submenu-item"><span>中文 (简体)</span></a></li><li class=" "><a data-locale="zh-TW" href="/zh-TW/docs/Learn_web_development/Core/Scripting/Strings" class="button submenu-item"><span>正體中文 (繁體)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In this article</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#the_power_of_words">The power of words</a></li><li class="document-toc-item "><a class="document-toc-link" href="#declaring_strings">Declaring strings</a></li><li class="document-toc-item "><a class="document-toc-link" href="#embedding_javascript">Embedding JavaScript</a></li><li class="document-toc-item "><a class="document-toc-link" href="#multiline_strings">Multiline strings</a></li><li class="document-toc-item "><a class="document-toc-link" href="#including_quotes_in_strings">Including quotes in strings</a></li><li class="document-toc-item "><a class="document-toc-link" href="#numbers_vs._strings">Numbers vs. strings</a></li><li class="document-toc-item "><a class="document-toc-link" href="#summary">Summary</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/en-US/docs/Learn_web_development/Getting_started">Getting started modules</a></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Getting_started/Environment_setup">Environment setup</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">Installing basic software</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web">Browsing the web</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors">Code editors</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">Dealing with files</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">Command line crash course</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Getting_started/Your_first_website">Your first website</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like">What will your website look like?</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">HTML: Creating the content</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">CSS: Styling the content</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">JavaScript: Adding interactivity</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website">Publishing your website</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Getting_started/Web_standards">Web standards</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works">How the web works</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model">The web standards model</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites">How browsers load websites</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills">Soft skills</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning">Research and learning</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork">Collaboration and teamwork</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes">Workflows and processes</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews">Succeeding in job interviews</a></li></ol></details></li><li class="section"><a href="/en-US/docs/Learn_web_development/Core">Core modules</a></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Core/Structuring_content">Structuring content with HTML</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">Basic HTML syntax</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">What's in the head? Webpage metadata</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">Headings and paragraphs in HTML</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">Emphasis and importance</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Lists">Lists</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">Structuring documents</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">Advanced text features</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links">Creating links</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">Challenge: Marking up a letter</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">Challenge: Structuring a page of content</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML images</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">HTML video and audio</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Challenge: Mozilla splash page</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">HTML table basics</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">HTML table accessibility</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">Challenge: Structuring a planet data table</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms">Forms and buttons in HTML</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">Debugging HTML</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Core/Styling_basics">CSS styling basics</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">What is CSS?</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started">Getting started with CSS</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">Challenge: Styling a biography page</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">Basic CSS selectors</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">Attribute selectors</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">Pseudo-classes and pseudo-elements</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators">Combinators</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model">The box model</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">Handling conflicts</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS values and units</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Sizing">Sizing items in CSS</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">Backgrounds and borders</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow">Overflowing content</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">Images, media, and form elements</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Tables">Styling tables</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">Debugging CSS</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">Challenge: Fundamental CSS comprehension</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">Challenge: Creating fancy letterheaded paper</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">Challenge: A cool-looking box</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Core/Text_styling">CSS text styling</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals">Fundamental text and font styling</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Text_styling/Styling_lists">Styling lists</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Text_styling/Styling_links">Styling links</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts">Web fonts</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">Challenge: Typesetting a community school homepage</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Core/CSS_layout">CSS layout</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction">Introduction to CSS layout</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Floats">Floats</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Positioning">Positioning</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox">Flexbox</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Grids">CSS grid layout</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">Responsive design</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Media_queries">Media query fundamentals</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">Challenge: Fundamental layout comprehension</a></li></ol></details></li><li class="toggle"><details open=""><summary><a href="/en-US/docs/Learn_web_development/Core/Scripting">Dynamic scripting with JavaScript</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript">What is JavaScript?</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/A_first_splash">A first splash into JavaScript</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Variables">Storing the information you need — Variables</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Math">Basic math in JavaScript — numbers and operators</a></li><li><em><a href="/en-US/docs/Learn_web_development/Core/Scripting/Strings" aria-current="page">Handling text — strings in JavaScript</a></em></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods">Useful string methods</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Arrays">Arrays</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Silly_story_generator">Challenge: Silly story generator</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Conditionals">Making decisions in your code — conditionals</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Loops">Looping code</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Functions">Functions — reusable blocks of code</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Build_your_own_function">Build your own function</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Return_values">Function return values</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Events">Introduction to events</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling">Event bubbling</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Image_gallery">Challenge: Image gallery</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Object_basics">JavaScript object basics</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting">DOM scripting introduction</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Network_requests">Making network requests with JavaScript</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/JSON">Working with JSON</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript">Debugging JavaScript and handling errors</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript frameworks and libraries</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction">Introduction to client-side frameworks</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Main_features">Framework main features</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started">Getting started with React</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning">Beginning our React todo list</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_components">Componentizing our React app</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state">React interactivity: Events and state</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility">Accessibility in React</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_resources">React resources</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Core/Accessibility">Accessibility</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">What is accessibility?</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Accessibility/Tooling">Accessibility tooling and assistive technology</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Accessibility/HTML">HTML: A good basis for accessibility</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Accessibility/Multimedia">Accessible multimedia</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Accessibility/Mobile">Mobile accessibility</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting">Challenge: Accessibility troubleshooting</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/Core/Design_for_developers">Design for developers</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Version_control">Version control</a></li><li class="section"><a href="/en-US/docs/Learn_web_development/Extensions">Extension modules</a></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes">Object prototypes</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming">Object-oriented programming</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript">Classes in JavaScript</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice">Object building practice</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features">Challenge: Adding features to our bouncing balls demo</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_APIs">Client-side web APIs</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Introduction to web APIs</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs">Video and Audio APIs</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics">Drawing graphics</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage">Client-side storage</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs">Third-party APIs</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Async_JS">Asynchronous JavaScript</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing">Introducing asynchronous JavaScript</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises">How to use promises</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API">How to implement a promise-based API</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers">Introducing workers</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations">Challenge: Sequencing animations</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Forms">Web forms</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/Your_first_form">Your first form</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form">How to structure a web form</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls">Basic native form controls</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">The HTML5 input types</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/Other_form_controls">Other form controls</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/Styling_web_forms">Styling web forms</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">Advanced form styling</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI pseudo-classes</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation">Client-side form validation</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">Sending form data</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_tools">Understanding client-side tools</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview">Client-side tooling overview</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">Package management basics</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain">Introducing a complete toolchain</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">Deploying our app</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Server-side">Server-side websites</a></summary><ol><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps">Server-side first steps</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction">Introduction to the server side</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview">Client-Server Overview</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">Website security</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django">Django web framework (Python)</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Introduction">Django introduction</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/development_environment">Setting up a Django development environment</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security">Django web application security</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog">Assessment: DIY Django mini blog</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs">Express web framework (Node.js)</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">Setting up a Node development environment</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Performance">Web performance</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/why_web_performance">The "why" of web performance</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/What_is_web_performance">What is web performance?</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/Perceived_performance">Perceived performance</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/Measuring_performance">Measuring performance</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/Multimedia">Multimedia: Images</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/video">Multimedia: video</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/JavaScript">JavaScript performance optimization</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/HTML">HTML performance optimization</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/CSS">CSS performance optimization</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/business_case_for_performance">The business case for web performance</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Testing">Testing</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Testing/Introduction">Introduction to cross-browser testing</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies">Strategies for carrying out testing</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection">Implementing feature detection</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing">Introduction to automated testing</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment">Setting up your own test automation environment</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Transform_animate">Transform and animate CSS</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Security_privacy">Security and privacy</a></li><li class="section">Further resources</li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Howto">How to solve common problems</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems">Solve common HTML problems</a></li><li><a href="/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems">Solve common CSS problems</a></li><li><a href="/en-US/docs/Learn_web_development/Howto/Solve_JavaScript_problems">Solve common JavaScript problems</a></li><li><a href="/en-US/docs/Learn_web_development/Howto/Web_mechanics">Web mechanics</a></li><li><a href="/en-US/docs/Learn_web_development/Howto/Tools_and_setup">Tools and setup</a></li><li><a href="/en-US/docs/Learn_web_development/Howto/Design_and_accessibility">Design and accessibility</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/About">About</a></li><li><a href="/en-US/docs/Learn_web_development/Educators">Resources for educators</a></li><li><a href="/en-US/docs/Learn_web_development/Changelog">Changelog</a></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In this article</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#the_power_of_words">The power of words</a></li><li class="document-toc-item "><a class="document-toc-link" href="#declaring_strings">Declaring strings</a></li><li class="document-toc-item "><a class="document-toc-link" href="#embedding_javascript">Embedding JavaScript</a></li><li class="document-toc-item "><a class="document-toc-link" href="#multiline_strings">Multiline strings</a></li><li class="document-toc-item "><a class="document-toc-link" href="#including_quotes_in_strings">Including quotes in strings</a></li><li class="document-toc-item "><a class="document-toc-link" href="#numbers_vs._strings">Numbers vs. strings</a></li><li class="document-toc-item "><a class="document-toc-link" href="#summary">Summary</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="en-US"><header><h1>Handling text — strings in JavaScript</h1></header><div class="section-content"><ul class="prev-next"><li><a class="button secondary" href="/en-US/docs/Learn_web_development/Core/Scripting/Math"><span class="button-wrap"> Previous </span></a></li><li><a class="button secondary" href="/en-US/docs/Learn_web_development/Core/Scripting"><span class="button-wrap"> Overview: Dynamic scripting with JavaScript</span></a></li><li><a class="button secondary" href="/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods"><span class="button-wrap"> Next </span></a></li></ul> <p>Next, we'll turn our attention to strings — this is what pieces of text are called in programming. In this article, we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in strings, and joining strings together.</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">Prerequisites:</th> <td>An understanding of <a href="/en-US/docs/Learn_web_development/Core/Structuring_content">HTML</a> and the <a href="/en-US/docs/Learn_web_development/Core/Styling_basics">fundamentals of CSS</a>.</td> </tr> <tr> <th scope="row">Learning outcomes:</th> <td> <ul> <li>Creating string literals.</li> <li>The requirement for quotes to match.</li> <li>String concatenation.</li> <li>Escaping characters in strings.</li> <li>Template literals, including using variables and multiline template literals.</li> </ul> </td> </tr> </tbody> </table></figure></div><section aria-labelledby="the_power_of_words"><h2 id="the_power_of_words"><a href="#the_power_of_words">The power of words</a></h2><div class="section-content"><p>Words are very important to humans — they are a large part of how we communicate. Since the web is a largely text-based medium designed to allow humans to communicate and share information, it is useful for us to have control over the words that appear on it. <a href="/en-US/docs/Glossary/HTML">HTML</a> provides structure and meaning to text, <a href="/en-US/docs/Glossary/CSS">CSS</a> allows us to precisely style it, and JavaScript offers many features for manipulating strings. These include creating custom welcome messages and prompts, showing the right text labels when needed, sorting terms into the desired order, and much more.</p> <p>Pretty much all of the programs we've shown you so far in the course have involved some string manipulation.</p></div></section><section aria-labelledby="declaring_strings"><h2 id="declaring_strings"><a href="#declaring_strings">Declaring strings</a></h2><div class="section-content"><p>Strings are dealt with similarly to numbers at first glance, but when you dig deeper you'll start to see some notable differences. Let's start by entering some basic lines into the <a href="/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools">browser developer console</a> to familiarize ourselves.</p> <p>To start with, enter the following lines:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const string = "The revolution will not be televised."; console.log(string); </code></pre></div> <p>Just like we did with numbers, we are declaring a variable, initializing it with a string value, and then returning the value. The only difference here is that when writing a string, you need to surround the value with quotes.</p> <p>If you don't do this, or miss one of the quotes, you'll get an error. Try entering the following lines:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate"><code>const badString1 = This is a test; const badString2 = 'This is a test; const badString3 = This is a test'; </code></pre></div> <p>These lines don't work because any text without quotes around it is interpreted as a variable name, property name, reserved word, or similar. If the browser doesn't recognize the unquoted text, then an error is raised (e.g., "missing; before statement"). If the browser can detect where a string starts but not its end (owing to the missing second quote), it reports an "unterminated string literal" error. If your program is raising such errors, then go back and check all your strings to make sure you have no missing quotation marks.</p> <p>The following will work if you previously defined the variable <code>string</code> — try it now:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const badString = string; console.log(badString); </code></pre></div> <p><code>badString</code> is now set to have the same value as <code>string</code>.</p></div></section><section aria-labelledby="single_quotes_double_quotes_and_backticks"><h3 id="single_quotes_double_quotes_and_backticks"><a href="#single_quotes_double_quotes_and_backticks">Single quotes, double quotes, and backticks</a></h3><div class="section-content"><p>In JavaScript, you can choose single quotes (<code>'</code>), double quotes (<code>"</code>), or backticks (<code>`</code>) to wrap your strings in. All of the following will work:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const single = 'Single quotes'; const double = "Double quotes"; const backtick = `Backtick`; console.log(single); console.log(double); console.log(backtick); </code></pre></div> <p>You must use the same character for the start and end of a string, or you will get an error:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate"><code>const badQuotes = 'This is not allowed!"; </code></pre></div> <p>Strings declared using single quotes and strings declared using double quotes are the same, and which you use is down to personal preference — although it is good practice to choose one style and use it consistently in your code.</p> <p>Strings declared using backticks are a special kind of string called a <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals"><em>template literal</em></a>. In most ways, template literals are like normal strings, but they have some special properties:</p> <ul> <li>you can <a href="#embedding_javascript">embed JavaScript</a> in them</li> <li>you can declare template literals over <a href="#multiline_strings">multiple lines</a></li> </ul></div></section><section aria-labelledby="embedding_javascript"><h2 id="embedding_javascript"><a href="#embedding_javascript">Embedding JavaScript</a></h2><div class="section-content"><p>Inside a template literal, you can wrap JavaScript variables or expressions inside <code>${ }</code>, and the result will be included in the string:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const name = "Chris"; const greeting = `Hello, ${name}`; console.log(greeting); // "Hello, Chris" </code></pre></div> <p>You can use the same technique to join together two variables:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const one = "Hello, "; const two = "how are you?"; const joined = `${one}${two}`; console.log(joined); // "Hello, how are you?" </code></pre></div> <p>Joining strings together like this is called <em>concatenation</em>.</p></div></section><section aria-labelledby="concatenation_in_context"><h3 id="concatenation_in_context"><a href="#concatenation_in_context">Concatenation in context</a></h3><div class="section-content"><p>Let's have a look at concatenation being used in action:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><button>Press me</button> <div id="greeting"></div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const button = document.querySelector("button"); function greet() { const name = prompt("What is your name?"); const greeting = document.querySelector("#greeting"); greeting.textContent = `Hello ${name}, nice to see you!`; } button.addEventListener("click", greet); </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Concatenation in context sample" id="frame_concatenation_in_context" width="100%" height="60" src="about:blank" data-live-path="/en-US/docs/Learn_web_development/Core/Scripting/Strings/" data-live-id="concatenation_in_context" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>Here, we are using the <a href="/en-US/docs/Web/API/Window/prompt" title="window.prompt()"><code>window.prompt()</code></a> function, which prompts the user to answer a question via a popup dialog box and then stores the text they enter inside a given variable — in this case <code>name</code>. We then display a string that inserts the name into a generic greeting message.</p></div></section><section aria-labelledby="concatenation_using"><h3 id="concatenation_using"><a href="#concatenation_using">Concatenation using "+"</a></h3><div class="section-content"><p>You can use <code>${}</code> only with template literals, not normal strings. You can concatenate normal strings using the <code>+</code> operator:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const greeting = "Hello"; const name = "Chris"; console.log(greeting + ", " + name); // "Hello, Chris" </code></pre></div> <p>However, template literals usually give you more readable code:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const greeting = "Hello"; const name = "Chris"; console.log(`${greeting}, ${name}`); // "Hello, Chris" </code></pre></div></div></section><section aria-labelledby="including_expressions_in_strings"><h3 id="including_expressions_in_strings"><a href="#including_expressions_in_strings">Including expressions in strings</a></h3><div class="section-content"><p>You can include JavaScript expressions in template literals, as well as just variables, and the results will be included in the result:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const song = "Fight the Youth"; const score = 9; const highestScore = 10; const output = `I like the song ${song}. I gave it a score of ${ (score / highestScore) * 100 }%.`; console.log(output); // "I like the song Fight the Youth. I gave it a score of 90%." </code></pre></div></div></section><section aria-labelledby="multiline_strings"><h2 id="multiline_strings"><a href="#multiline_strings">Multiline strings</a></h2><div class="section-content"><p>Template literals respect the line breaks in the source code, so you can write strings that span multiple lines like this:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const newline = `One day you finally knew what you had to do, and began,`; console.log(newline); /* One day you finally knew what you had to do, and began, */ </code></pre></div> <p>To have the equivalent output using a normal string you'd have to include line break characters (<code>\n</code>) in the string:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const newline = "One day you finally knew\nwhat you had to do, and began,"; console.log(newline); /* One day you finally knew what you had to do, and began, */ </code></pre></div> <p>See our <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">Template literals</a> reference page for more examples and details of advanced features.</p></div></section><section aria-labelledby="including_quotes_in_strings"><h2 id="including_quotes_in_strings"><a href="#including_quotes_in_strings">Including quotes in strings</a></h2><div class="section-content"><p>Since we use quotes to indicate the start and end of strings, how can we include actual quotes in strings? We know that this won't work:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate"><code>const badQuotes = "She said "I think so!""; </code></pre></div> <p>One common option is to use one of the other characters to declare the string:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const goodQuotes1 = 'She said "I think so!"'; const goodQuotes2 = `She said "I'm not going in there!"`; </code></pre></div> <p>Another option is to <em>escape</em> the problem quotation mark. Escaping characters means that we do something to them to make sure they are recognized as text, not part of the code. In JavaScript, we do this by putting a backslash just before the character. Try this:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const bigmouth = 'I\'ve got no right to take my place…'; console.log(bigmouth); </code></pre></div> <p>You can use the same technique to insert other special characters. See <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#escape_sequences">Escape sequences</a> for more details.</p></div></section><section aria-labelledby="numbers_vs._strings"><h2 id="numbers_vs._strings"><a href="#numbers_vs._strings">Numbers vs. strings</a></h2><div class="section-content"><p>What happens when we try to concatenate a string and a number? Let's try it in our console:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const name = "Front "; const number = 242; console.log(name + number); // "Front 242" </code></pre></div> <p>You might expect this to return an error, but it works just fine. How numbers should be displayed as strings is fairly well-defined, so the browser automatically converts the number to a string and concatenates the two strings.</p> <p>If you have a numeric variable that you want to convert to a string or a string variable that you want to convert to a number, you can use the following two constructs:</p> <ul> <li> <p>The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number"><code>Number()</code></a> function converts anything passed to it into a number if it can. Try the following:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const myString = "123"; const myNum = Number(myString); console.log(typeof myNum); // number </code></pre></div> </li> <li> <p>Conversely, the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/String"><code>String()</code></a> function converts its argument to a string. Try this:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const myNum2 = 123; const myString2 = String(myNum2); console.log(typeof myString2); // string </code></pre></div> </li> </ul> <p>These constructs can be really useful in some situations. For example, if a user enters a number into a form's text field, it's a string. However, if you want to add this number to something, you'll need it to be a number, so you could pass it through <code>Number()</code> to handle this. We did exactly this in our <a href="https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/first-splash/number-guessing-game.html" class="external" target="_blank">Number Guessing Game</a>, in the <code>checkGuess</code> function.</p></div></section><section aria-labelledby="summary"><h2 id="summary"><a href="#summary">Summary</a></h2><div class="section-content"><p>So that's the very basics of strings covered in JavaScript. In the next article, we'll build on this, looking at some of the built-in methods available to strings in JavaScript and how we can use them to manipulate our strings into just the form we want.</p> <ul class="prev-next"><li><a class="button secondary" href="/en-US/docs/Learn_web_development/Core/Scripting/Math"><span class="button-wrap"> Previous </span></a></li><li><a class="button secondary" href="/en-US/docs/Learn_web_development/Core/Scripting"><span class="button-wrap"> Overview: Dynamic scripting with JavaScript</span></a></li><li><a class="button secondary" href="/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods"><span class="button-wrap"> Next </span></a></li></ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>Help improve MDN</h2><fieldset class="feedback"><label>Was this page helpful to you?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button></div></fieldset><a class="contribute" href="https://github.com/mdn/content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.<p class="last-modified-date">This page was last modified on <time dateTime="2024-12-19T15:37:45.000Z">Dec 19, 2024</time> by <a href="/en-US/docs/Learn_web_development/Core/Scripting/Strings/contributors.txt" rel="nofollow">MDN contributors</a>.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/scripting/strings/index.md?plain=1" title="Folder: en-us/learn_web_development/core/scripting/strings (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FStrings&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fscripting%2Fstrings%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FStrings%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fscripting%2Fstrings%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F5b20f5f4265f988f80f513db0e4b35c7e0cd70dc%0A*+Document+last+modified%3A+2024-12-19T15%3A37%3A45.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/en-US/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/en-US/docs/Learn_web_development/Core/Scripting/Strings","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Scripting/Math\"><span class=\"button-wrap\"> Previous </span></a></li><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Scripting\"><span class=\"button-wrap\"> Overview: Dynamic scripting with JavaScript</span></a></li><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods\"><span class=\"button-wrap\"> Next </span></a></li></ul>\n<p>Next, we'll turn our attention to strings — this is what pieces of text are called in programming. In this article, we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in strings, and joining strings together.</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">Prerequisites:</th>\n <td>An understanding of <a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content\">HTML</a> and the <a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics\">fundamentals of CSS</a>.</td>\n </tr>\n <tr>\n <th scope=\"row\">Learning outcomes:</th>\n <td>\n <ul>\n <li>Creating string literals.</li>\n <li>The requirement for quotes to match.</li>\n <li>String concatenation.</li>\n <li>Escaping characters in strings.</li>\n <li>Template literals, including using variables and multiline template literals.</li>\n </ul>\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"the_power_of_words","title":"The power of words","isH3":false,"content":"<p>Words are very important to humans — they are a large part of how we communicate. Since the web is a largely text-based medium designed to allow humans to communicate and share information, it is useful for us to have control over the words that appear on it. <a href=\"/en-US/docs/Glossary/HTML\">HTML</a> provides structure and meaning to text, <a href=\"/en-US/docs/Glossary/CSS\">CSS</a> allows us to precisely style it, and JavaScript offers many features for manipulating strings. These include creating custom welcome messages and prompts, showing the right text labels when needed, sorting terms into the desired order, and much more.</p>\n<p>Pretty much all of the programs we've shown you so far in the course have involved some string manipulation.</p>"}},{"type":"prose","value":{"id":"declaring_strings","title":"Declaring strings","isH3":false,"content":"<p>Strings are dealt with similarly to numbers at first glance, but when you dig deeper you'll start to see some notable differences. Let's start by entering some basic lines into the <a href=\"/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools\">browser developer console</a> to familiarize ourselves.</p>\n<p>To start with, enter the following lines:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const string = \"The revolution will not be televised.\";\nconsole.log(string);\n</code></pre></div>\n<p>Just like we did with numbers, we are declaring a variable, initializing it with a string value, and then returning the value. The only difference here is that when writing a string, you need to surround the value with quotes.</p>\n<p>If you don't do this, or miss one of the quotes, you'll get an error. Try entering the following lines:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js example-bad notranslate\"><code>const badString1 = This is a test;\nconst badString2 = 'This is a test;\nconst badString3 = This is a test';\n</code></pre></div>\n<p>These lines don't work because any text without quotes around it is interpreted as a variable name, property name, reserved word, or similar. If the browser doesn't recognize the unquoted text, then an error is raised (e.g., \"missing; before statement\"). If the browser can detect where a string starts but not its end (owing to the missing second quote), it reports an \"unterminated string literal\" error. If your program is raising such errors, then go back and check all your strings to make sure you have no missing quotation marks.</p>\n<p>The following will work if you previously defined the variable <code>string</code> — try it now:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const badString = string;\nconsole.log(badString);\n</code></pre></div>\n<p><code>badString</code> is now set to have the same value as <code>string</code>.</p>"}},{"type":"prose","value":{"id":"single_quotes_double_quotes_and_backticks","title":"Single quotes, double quotes, and backticks","isH3":true,"content":"<p>In JavaScript, you can choose single quotes (<code>'</code>), double quotes (<code>\"</code>), or backticks (<code>`</code>) to wrap your strings in. All of the following will work:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const single = 'Single quotes';\nconst double = \"Double quotes\";\nconst backtick = `Backtick`;\n\nconsole.log(single);\nconsole.log(double);\nconsole.log(backtick);\n</code></pre></div>\n<p>You must use the same character for the start and end of a string, or you will get an error:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js example-bad notranslate\"><code>const badQuotes = 'This is not allowed!\";\n</code></pre></div>\n<p>Strings declared using single quotes and strings declared using double quotes are the same, and which you use is down to personal preference — although it is good practice to choose one style and use it consistently in your code.</p>\n<p>Strings declared using backticks are a special kind of string called a <a href=\"/en-US/docs/Web/JavaScript/Reference/Template_literals\"><em>template literal</em></a>. In most ways, template literals are like normal strings, but they have some special properties:</p>\n<ul>\n<li>you can <a href=\"#embedding_javascript\">embed JavaScript</a> in them</li>\n<li>you can declare template literals over <a href=\"#multiline_strings\">multiple lines</a></li>\n</ul>"}},{"type":"prose","value":{"id":"embedding_javascript","title":"Embedding JavaScript","isH3":false,"content":"<p>Inside a template literal, you can wrap JavaScript variables or expressions inside <code>${ }</code>, and the result will be included in the string:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const name = \"Chris\";\nconst greeting = `Hello, ${name}`;\nconsole.log(greeting); // \"Hello, Chris\"\n</code></pre></div>\n<p>You can use the same technique to join together two variables:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const one = \"Hello, \";\nconst two = \"how are you?\";\nconst joined = `${one}${two}`;\nconsole.log(joined); // \"Hello, how are you?\"\n</code></pre></div>\n<p>Joining strings together like this is called <em>concatenation</em>.</p>"}},{"type":"prose","value":{"id":"concatenation_in_context","title":"Concatenation in context","isH3":true,"content":"<p>Let's have a look at concatenation being used in action:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><button>Press me</button>\n<div id=\"greeting\"></div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const button = document.querySelector(\"button\");\n\nfunction greet() {\n const name = prompt(\"What is your name?\");\n const greeting = document.querySelector(\"#greeting\");\n greeting.textContent = `Hello ${name}, nice to see you!`;\n}\n\nbutton.addEventListener(\"click\", greet);\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Concatenation in context sample\" id=\"frame_concatenation_in_context\" width=\"100%\" height=\"60\" src=\"about:blank\" data-live-path=\"/en-US/docs/Learn_web_development/Core/Scripting/Strings/\" data-live-id=\"concatenation_in_context\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>Here, we are using the <a href=\"/en-US/docs/Web/API/Window/prompt\" title=\"window.prompt()\"><code>window.prompt()</code></a> function, which prompts the user to answer a question via a popup dialog box and then stores the text they enter inside a given variable — in this case <code>name</code>. We then display a string that inserts the name into a generic greeting message.</p>"}},{"type":"prose","value":{"id":"concatenation_using","title":"Concatenation using \"+\"","isH3":true,"content":"<p>You can use <code>${}</code> only with template literals, not normal strings. You can concatenate normal strings using the <code>+</code> operator:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const greeting = \"Hello\";\nconst name = \"Chris\";\nconsole.log(greeting + \", \" + name); // \"Hello, Chris\"\n</code></pre></div>\n<p>However, template literals usually give you more readable code:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const greeting = \"Hello\";\nconst name = \"Chris\";\nconsole.log(`${greeting}, ${name}`); // \"Hello, Chris\"\n</code></pre></div>"}},{"type":"prose","value":{"id":"including_expressions_in_strings","title":"Including expressions in strings","isH3":true,"content":"<p>You can include JavaScript expressions in template literals, as well as just variables, and the results will be included in the result:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const song = \"Fight the Youth\";\nconst score = 9;\nconst highestScore = 10;\nconst output = `I like the song ${song}. I gave it a score of ${\n (score / highestScore) * 100\n}%.`;\nconsole.log(output); // \"I like the song Fight the Youth. I gave it a score of 90%.\"\n</code></pre></div>"}},{"type":"prose","value":{"id":"multiline_strings","title":"Multiline strings","isH3":false,"content":"<p>Template literals respect the line breaks in the source code, so you can write strings that span multiple lines like this:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const newline = `One day you finally knew\nwhat you had to do, and began,`;\nconsole.log(newline);\n\n/*\nOne day you finally knew\nwhat you had to do, and began,\n*/\n</code></pre></div>\n<p>To have the equivalent output using a normal string you'd have to include line break characters (<code>\\n</code>) in the string:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const newline = \"One day you finally knew\\nwhat you had to do, and began,\";\nconsole.log(newline);\n\n/*\nOne day you finally knew\nwhat you had to do, and began,\n*/\n</code></pre></div>\n<p>See our <a href=\"/en-US/docs/Web/JavaScript/Reference/Template_literals\">Template literals</a> reference page for more examples and details of advanced features.</p>"}},{"type":"prose","value":{"id":"including_quotes_in_strings","title":"Including quotes in strings","isH3":false,"content":"<p>Since we use quotes to indicate the start and end of strings, how can we include actual quotes in strings? We know that this won't work:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js example-bad notranslate\"><code>const badQuotes = \"She said \"I think so!\"\";\n</code></pre></div>\n<p>One common option is to use one of the other characters to declare the string:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const goodQuotes1 = 'She said \"I think so!\"';\nconst goodQuotes2 = `She said \"I'm not going in there!\"`;\n</code></pre></div>\n<p>Another option is to <em>escape</em> the problem quotation mark. Escaping characters means that we do something to them to make sure they are recognized as text, not part of the code. In JavaScript, we do this by putting a backslash just before the character. Try this:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const bigmouth = 'I\\'ve got no right to take my place…';\nconsole.log(bigmouth);\n</code></pre></div>\n<p>You can use the same technique to insert other special characters. See <a href=\"/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#escape_sequences\">Escape sequences</a> for more details.</p>"}},{"type":"prose","value":{"id":"numbers_vs._strings","title":"Numbers vs. strings","isH3":false,"content":"<p>What happens when we try to concatenate a string and a number? Let's try it in our console:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const name = \"Front \";\nconst number = 242;\nconsole.log(name + number); // \"Front 242\"\n</code></pre></div>\n<p>You might expect this to return an error, but it works just fine. How numbers should be displayed as strings is fairly well-defined, so the browser automatically converts the number to a string and concatenates the two strings.</p>\n<p>If you have a numeric variable that you want to convert to a string or a string variable that you want to convert to a number, you can use the following two constructs:</p>\n<ul>\n<li>\n<p>The <a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number\"><code>Number()</code></a> function converts anything passed to it into a number if it can. Try the following:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const myString = \"123\";\nconst myNum = Number(myString);\nconsole.log(typeof myNum);\n// number\n</code></pre></div>\n</li>\n<li>\n<p>Conversely, the <a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/String\"><code>String()</code></a> function converts its argument to a string. Try this:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const myNum2 = 123;\nconst myString2 = String(myNum2);\nconsole.log(typeof myString2);\n// string\n</code></pre></div>\n</li>\n</ul>\n<p>These constructs can be really useful in some situations. For example, if a user enters a number into a form's text field, it's a string. However, if you want to add this number to something, you'll need it to be a number, so you could pass it through <code>Number()</code> to handle this. We did exactly this in our <a href=\"https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/first-splash/number-guessing-game.html\" class=\"external\" target=\"_blank\">Number Guessing Game</a>, in the <code>checkGuess</code> function.</p>"}},{"type":"prose","value":{"id":"summary","title":"Summary","isH3":false,"content":"<p>So that's the very basics of strings covered in JavaScript. In the next article, we'll build on this, looking at some of the built-in methods available to strings in JavaScript and how we can use them to manipulate our strings into just the form we want.</p>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Scripting/Math\"><span class=\"button-wrap\"> Previous </span></a></li><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Scripting\"><span class=\"button-wrap\"> Overview: Dynamic scripting with JavaScript</span></a></li><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods\"><span class=\"button-wrap\"> Next </span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":false,"locale":"en-US","mdn_url":"/en-US/docs/Learn_web_development/Core/Scripting/Strings","modified":"2024-12-19T15:37:45.000Z","native":"English (US)","noIndexing":false,"other_translations":[{"locale":"de","title":"Umgang mit Text — Zeichenketten in JavaScript","native":"Deutsch"},{"locale":"es","title":"Manejar texto — cadenas en JavaScript","native":"Español"},{"locale":"fr","title":"Gérer du texte — les chaînes de caractères en JavaScript","native":"Français"},{"locale":"ja","title":"テキストの扱い — JavaScript での文字列","native":"日本語"},{"locale":"ko","title":"문자열 다루기 — 문자열","native":"한국어"},{"locale":"pt-BR","title":"Trabalhando com texto — strings em JavaScript","native":"Português (do Brasil)"},{"locale":"ru","title":"Работа с текстом — строки в JavaScript","native":"Русский"},{"locale":"zh-CN","title":"文本处理——JavaScript 中的字符串","native":"中文 (简体)"},{"locale":"zh-TW","title":"處理文字 - JavaScript中的字串","native":"正體中文 (繁體)"}],"pageTitle":"Handling text — strings in JavaScript - Learn web development | MDN","parents":[{"uri":"/en-US/docs/Learn_web_development","title":"Learn"},{"uri":"/en-US/docs/Learn_web_development/Core","title":"Core learning modules"},{"uri":"/en-US/docs/Learn_web_development/Core/Scripting","title":"Dynamic scripting with JavaScript"},{"uri":"/en-US/docs/Learn_web_development/Core/Scripting/Strings","title":"Handling text — strings in JavaScript"}],"popularity":null,"short_title":"Handling text — strings in JavaScript","sidebarHTML":"<ol><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Getting_started\">Getting started modules</a></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup\">Environment setup</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">Installing basic software</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">Browsing the web</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\">Code editors</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">Dealing with files</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">Command line crash course</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website\">Your first website</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">What will your website look like?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML: Creating the content</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS: Styling the content</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript: Adding interactivity</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">Publishing your website</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards\">Web standards</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">How the web works</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">The web standards model</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\">How browsers load websites</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills\">Soft skills</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\">Research and learning</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\">Collaboration and teamwork</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\">Workflows and processes</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\">Succeeding in job interviews</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Core\">Core modules</a></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content\">Structuring content with HTML</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">Basic HTML syntax</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">What's in the head? Webpage metadata</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">Headings and paragraphs in HTML</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">Emphasis and importance</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Lists\">Lists</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">Structuring documents</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">Advanced text features</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links\">Creating links</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">Challenge: Marking up a letter</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">Challenge: Structuring a page of content</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML images</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">HTML video and audio</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Challenge: Mozilla splash page</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">HTML table basics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">HTML table accessibility</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">Challenge: Structuring a planet data table</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms\">Forms and buttons in HTML</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">Debugging HTML</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics\">CSS styling basics</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">What is CSS?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started\">Getting started with CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">Challenge: Styling a biography page</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">Basic CSS selectors</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">Attribute selectors</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">Pseudo-classes and pseudo-elements</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators\">Combinators</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model\">The box model</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">Handling conflicts</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS values and units</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Sizing\">Sizing items in CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">Backgrounds and borders</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow\">Overflowing content</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">Images, media, and form elements</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Tables\">Styling tables</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">Debugging CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">Challenge: Fundamental CSS comprehension</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">Challenge: Creating fancy letterheaded paper</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">Challenge: A cool-looking box</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling\">CSS text styling</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals\">Fundamental text and font styling</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Styling_lists\">Styling lists</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Styling_links\">Styling links</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts\">Web fonts</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">Challenge: Typesetting a community school homepage</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout\">CSS layout</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction\">Introduction to CSS layout</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Floats\">Floats</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Positioning\">Positioning</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox\">Flexbox</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Grids\">CSS grid layout</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">Responsive design</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Media_queries\">Media query fundamentals</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">Challenge: Fundamental layout comprehension</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><a href=\"/en-US/docs/Learn_web_development/Core/Scripting\">Dynamic scripting with JavaScript</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">What is JavaScript?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/A_first_splash\">A first splash into JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/What_went_wrong\">What went wrong? Troubleshooting JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Variables\">Storing the information you need — Variables</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Math\">Basic math in JavaScript — numbers and operators</a></li><li><em><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Strings\" aria-current=\"page\">Handling text — strings in JavaScript</a></em></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">Useful string methods</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Arrays\">Arrays</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">Challenge: Silly story generator</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Conditionals\">Making decisions in your code — conditionals</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Loops\">Looping code</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Functions\">Functions — reusable blocks of code</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">Build your own function</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Return_values\">Function return values</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Events\">Introduction to events</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling\">Event bubbling</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Image_gallery\">Challenge: Image gallery</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript object basics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting\">DOM scripting introduction</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Network_requests\">Making network requests with JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/JSON\">Working with JSON</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">Debugging JavaScript and handling errors</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript frameworks and libraries</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\">Introduction to client-side frameworks</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">Framework main features</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">Getting started with React</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">Beginning our React todo list</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">Componentizing our React app</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\">React interactivity: Events and state</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\">React interactivity: Editing, filtering, conditional rendering</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\">Accessibility in React</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\">React resources</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility\">Accessibility</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">What is accessibility?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/Tooling\">Accessibility tooling and assistive technology</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/HTML\">HTML: A good basis for accessibility</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS and JavaScript accessibility best practices</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA basics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/Multimedia\">Accessible multimedia</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/Mobile\">Mobile accessibility</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">Challenge: Accessibility troubleshooting</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Design_for_developers\">Design for developers</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Version_control\">Version control</a></li><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Extensions\">Extension modules</a></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">Object prototypes</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">Object-oriented programming</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">Classes in JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">Object building practice</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">Challenge: Adding features to our bouncing balls demo</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs\">Client-side web APIs</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Introduction to web APIs</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">Video and Audio APIs</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">Drawing graphics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">Client-side storage</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">Third-party APIs</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS\">Asynchronous JavaScript</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing\">Introducing asynchronous JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises\">How to use promises</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">How to implement a promise-based API</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">Introducing workers</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">Challenge: Sequencing animations</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms\">Web forms</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Your_first_form\">Your first form</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">How to structure a web form</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">Basic native form controls</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">The HTML5 input types</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">Other form controls</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">Styling web forms</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">Advanced form styling</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI pseudo-classes</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\">Client-side form validation</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">Sending form data</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools\">Understanding client-side tools</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">Client-side tooling overview</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">Package management basics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">Introducing a complete toolchain</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">Deploying our app</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side\">Server-side websites</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps\">Server-side first steps</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">Introduction to the server side</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">Client-Server Overview</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">Server-side web frameworks</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">Website security</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django\">Django web framework (Python)</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Django introduction</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">Setting up a Django development environment</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: The Local Library website</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django Tutorial Part 2: Creating a skeleton website</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Models\">Django Tutorial Part 3: Using models</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\">Django Tutorial Part 4: Django admin site</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\">Django Tutorial Part 5: Creating our home page</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\">Django Tutorial Part 6: Generic list and detail views</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\">Django Tutorial Part 7: Sessions framework</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\">Django Tutorial Part 8: User authentication and permissions</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Forms\">Django Tutorial Part 9: Working with forms</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Testing\">Django Tutorial Part 10: Testing a Django web application</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\">Django Tutorial Part 11: Deploying Django to production</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\">Django web application security</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\">Assessment: DIY Django mini blog</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express web framework (Node.js)</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Express/Node introduction</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">Setting up a Node development environment</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express Tutorial: The Local Library website</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express Tutorial Part 2: Creating a skeleton website</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\">Express Tutorial Part 4: Routes and controllers</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express Tutorial Part 5: Displaying library data</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express Tutorial Part 6: Working with forms</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance\">Web performance</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/why_web_performance\">The \"why\" of web performance</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">What is web performance?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">Perceived performance</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">Measuring performance</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/Multimedia\">Multimedia: Images</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/video\">Multimedia: video</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript performance optimization</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/HTML\">HTML performance optimization</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/CSS\">CSS performance optimization</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">The business case for web performance</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing\">Testing</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Introduction\">Introduction to cross-browser testing</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">Strategies for carrying out testing</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">Handling common HTML and CSS problems</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection\">Implementing feature detection</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing\">Introduction to automated testing</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">Setting up your own test automation environment</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Transform_animate\">Transform and animate CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Security_privacy\">Security and privacy</a></li><li class=\"section\">Further resources</li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Howto\">How to solve common problems</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems\">Solve common HTML problems</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems\">Solve common CSS problems</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">Solve common JavaScript problems</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Web_mechanics\">Web mechanics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Tools_and_setup\">Tools and setup</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Design_and_accessibility\">Design and accessibility</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/About\">About</a></li><li><a href=\"/en-US/docs/Learn_web_development/Educators\">Resources for educators</a></li><li><a href=\"/en-US/docs/Learn_web_development/Changelog\">Changelog</a></li></ol>","source":{"folder":"en-us/learn_web_development/core/scripting/strings","github_url":"https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/scripting/strings/index.md","last_commit_url":"https://github.com/mdn/content/commit/5b20f5f4265f988f80f513db0e4b35c7e0cd70dc","filename":"index.md"},"summary":"Next, we'll turn our attention to strings — this is what pieces of text are called in programming. In this article, we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in strings, and joining strings together.","title":"Handling text — strings in JavaScript","toc":[{"text":"The power of words","id":"the_power_of_words"},{"text":"Declaring strings","id":"declaring_strings"},{"text":"Embedding JavaScript","id":"embedding_javascript"},{"text":"Multiline strings","id":"multiline_strings"},{"text":"Including quotes in strings","id":"including_quotes_in_strings"},{"text":"Numbers vs. strings","id":"numbers_vs._strings"},{"text":"Summary","id":"summary"}],"pageType":"learn-module-chapter"}}</script></body></html>