{"id":10260,"date":"2020-10-25T16:22:57","date_gmt":"2020-10-25T23:22:57","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=10260"},"modified":"2023-12-01T04:03:23","modified_gmt":"2023-12-01T12:03:23","slug":"how-to-use-substring-in-javascript","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/","title":{"rendered":"How to Use Substring in JavaScript"},"content":{"rendered":"\n<p><em>The JavaScript substring() method retrieves a range of characters between two index positions. You can use substring() to retrieve characters to the end of a string by omitting an end index position.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>A substring is a smaller portion of a larger string. Programmers use substrings to extract the specific data they need from a string.<\/p>\n\n\n\n<p>For example, you could split the day, month, and year of a user\u2019s date of birth into three variables. This would let you store each value on their own instead of storing the date of birth as one variable.<\/p>\n\n\n\n<p>Or you could split a string to get the first two letters of a user\u2019s name. In this guide, we\u2019ll explore how you can use substring in JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Use the JavaScript Substring Method<\/strong><\/h2>\n\n\n\n<p>The JavaScript substring() method extracts part of a string between two index values. Without a second index value, substring() retrieves all the characters after a particular index number.<\/p>\n\n\n\n<p>The substring() method accepts two arguments:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The position at which the substring should <strong>start<\/strong>; and<\/li><li>The position where the substring should <strong>stop<\/strong>.<\/li><\/ul>\n\n\n\n<p>Let&#8217;s take a look at the syntax for this method:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&quot;test&quot;.substring(start, end);<\/pre><\/div>\n\n\n\n<p>The substring() method is appended to the end of a string. Only the start parameter is required for the substring() method to work.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Substring JavaScript Examples<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Retrieve Characters to the End of a String<\/h3>\n\n\n\n<p>We have a string that contains the name of a cat. We want to remove the first two characters from the cat&#8217;s name and see what is left. To do this, we can use the substring() method:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>const catName = &quot;Pickles&quot;;\nconst newCatName = catName.substring(2);\nconsole.log(newCatName);<\/pre><\/div>\n\n\n\n<p>On the first line of code, we define a variable named <em>catName. <\/em>We assign this variable the value <em>Pickles<\/em>. Next, we define a <a href=\"https:\/\/careerkarma.com\/blog\/javascript-variables\/\">JavaScript variable<\/a> that gets a substring from the variable <em>catName<\/em>.<\/p>\n\n\n\n<p>We have used <em>2<\/em> as a parameter in the <em>substring()<\/em> method. This means that the method will return every letter after the second index in the string. Here\u2019s the output for our example:<\/p>\n\n\n\n<p><code>ckles<\/code><\/p>\n\n\n\n<p>We now can see all the letters that appear after index position 2.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Retrieve Characters in a Range<\/h3>\n\n\n\n<p>If we are looking to get part of a string starting from a character and ending at another, we should pass two values into <em>substring(). <\/em>The first argument is the start character, and the second is the end character.<\/p>\n\n\n\n<p>Let&#8217;s retrieve the first three characters of our cat&#8217;s name:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>const catName = &quot;Pickles&quot;;\nconst newCatName = catName.substring(0,2);\nconsole.log(newCatName);<\/pre><\/div>\n\n\n\n<p>The output for the above example is as follows:<\/p>\n\n\n\n<p><code>Pic<\/code><\/p>\n\n\n\n<p>Our string contains all characters in the index range of 0 and 3. Remember, strings are indexed from zero. This means that if you want to retrieve the first character from a string you must start your substring at 0.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Retrieve the Last Character<\/h3>\n\n\n\n<p>Let&#8217;s retrieve the last character of our string. We cannot use negative index numbers with the substring method. Instead, we can use the length method to find the length of a string. Then, we can use that number to retrieve the last character in our string:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>const catName = &quot;Pickles&quot;;\nconst newCatName = catName.substring(catName.length -1, catName.length);\nconsole.log(newCatName);<\/pre><\/div>\n\n\n\n<p>The result is as follows:<br><\/p>\n\n\n\n<p><code>s<\/code><\/p>\n\n\n\n<p>In this example, <em>catName.length<\/em> gets the length of our string\u2014the number of characters it has\u2014and returns the last character in the string.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>The JavaScript substring() method returns the characters between two index values in a list. If you do not specify an end index value, substring() returns all the characters after a given index position.<\/p>\n\n\n\n<p>Developers use the substring() method to break down a string into multiple parts. This is useful if a developer only needs a particular piece of information from a string.<\/p>\n\n\n\n<p>To learn more about coding in JavaScript, read our guide on the <a href=\"https:\/\/careerkarma.com\/blog\/tutorial-for-javascript-beginners\/\">best tutorials for JavaScript beginners<\/a>.<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/repl.it\/@careerkarma\/JavaScript-Substring?lite=true\" scrolling=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" sandbox=\"allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals\" width=\"100%\" height=\"400px\" frameborder=\"no\"><\/iframe>\n","protected":false},"excerpt":{"rendered":"The JavaScript substring() method retrieves a range of characters between two index positions. You can use substring() to retrieve characters to the end of a string by omitting an end index position. A substring is a smaller portion of a larger string. Programmers use substrings to extract the specific data they need from a string.&hellip;","protected":false},"author":240,"featured_media":12330,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[12687],"class_list":{"0":"post-10260","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-tutorial"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":[]},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Use Substring in JavaScript | Career Karma<\/title>\n<meta name=\"description\" content=\"Substrings are a crucial part of JavaScript. Learn more about how substrings work, and how you can use them on Career Karma.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Substring in JavaScript\" \/>\n<meta property=\"og:description\" content=\"Substrings are a crucial part of JavaScript. Learn more about how substrings work, and how you can use them on Career Karma.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-25T23:22:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T12:03:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/javascript-substring.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"How to Use Substring in JavaScript\",\"datePublished\":\"2020-10-25T23:22:57+00:00\",\"dateModified\":\"2023-12-01T12:03:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/\"},\"wordCount\":612,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/javascript-substring.jpg\",\"keywords\":[\"tutorial\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/\",\"name\":\"How to Use Substring in JavaScript | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/javascript-substring.jpg\",\"datePublished\":\"2020-10-25T23:22:57+00:00\",\"dateModified\":\"2023-12-01T12:03:23+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"Substrings are a crucial part of JavaScript. Learn more about how substrings work, and how you can use them on Career Karma.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/javascript-substring.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/javascript-substring.jpg\",\"width\":1200,\"height\":675,\"caption\":\"JavaScript Substring\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/careerkarma.com\/blog\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use Substring in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use Substring in JavaScript | Career Karma","description":"Substrings are a crucial part of JavaScript. Learn more about how substrings work, and how you can use them on Career Karma.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Substring in JavaScript","og_description":"Substrings are a crucial part of JavaScript. Learn more about how substrings work, and how you can use them on Career Karma.","og_url":"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-10-25T23:22:57+00:00","article_modified_time":"2023-12-01T12:03:23+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/javascript-substring.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"How to Use Substring in JavaScript","datePublished":"2020-10-25T23:22:57+00:00","dateModified":"2023-12-01T12:03:23+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/"},"wordCount":612,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/javascript-substring.jpg","keywords":["tutorial"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/","url":"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/","name":"How to Use Substring in JavaScript | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/javascript-substring.jpg","datePublished":"2020-10-25T23:22:57+00:00","dateModified":"2023-12-01T12:03:23+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"Substrings are a crucial part of JavaScript. Learn more about how substrings work, and how you can use them on Career Karma.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/javascript-substring.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/javascript-substring.jpg","width":1200,"height":675,"caption":"JavaScript Substring"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/how-to-use-substring-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"How to Use Substring in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/10260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=10260"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/10260\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/12330"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=10260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=10260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=10260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}