Let’s say you are programming your webpage, and only want to use part of a string that you receive. You may want to only use the first word, the second word, or a few words but not the rest of the string. If you have this issue, the JavaScript Slice (or short JS Slice) method is perfect for you. This tutorial will give you an easy way how to use the JavaScript Slice method with strings to your advantage.
You find the JS Slice (Arrays) Tutorial here.
🔥 Learn JavaScript Programming – Beginner Friendly!
🔨 JavaScript Basics
👉 JavaScript alert()
👉 Difference between Let and Const
🔸 JavaScript Arrays
👉 JavaScript Array Filter
👉 JavaScript Array Find
👉 JavaScript forEach (Arrays)
👉 JavaScript Slice (Arrays)
👉 JavaScript Spread Operator
🔸 JavaScript Strings
👉 JavaScript Slice(Strings)
👉 JavaScript Includes
🌐 Web Development with JavaScript
👉 Store User Input in a variable with JS
⚙️ JavaScript Specifics
👉 Sorting Numbers in JS
👉 JavaScript Fetch API
👉 toLocaleDateString in JavaScript
Table of Contents
- What Does Javascript Slice Do?
- JavaScript Slice Method Syntax
- Real-World Example One
- Real-World Example Two
- Real-World Example Three
- Wrapping Up
What Does Javascript Slice Do?
The JavaScript Slice method allows users to extract a specified part of a string and returns the value extracted. For example, say you have a string called ‘boatName’ and it has a value of “Big Bertha”. You have a website that you are designing that randomly generates names for people based off a bunch of random strings. You only want to extract the first word in this string for your website, which in this case is “Big”.
JavaScript Slice Method Syntax
Using the js slice (JavaScript Slice) method for a string is simple. All you need is the beginning index of where you want to start extracting, and the ending syntax for the ending of the word or phrase you want to extract. Altogether, the syntax looks like the keywords below:
stringName.slice(beginning, end);
- stringName refers to the name of the string variable you want to use the
slice()function on. - slice is the name of the method you are using.
- beginning is the index of where you want to begin extraction on your string (reminder: always start at 0)
- end is the index of where you want to stop extraction on your string.
Real-World Example One
Scenario: You own a business that requires employees to login with a username and a password. The usernames are the first four letters of the employee’s first name combined with the first four letters of an employees last name. Below is an example of how to take a variable called empName and use the JavaScript Slice method in order to generate an employee’s username.
let empName = "Johnathan Smith";
let firstName = empName.slice(0, 4);
let lastName = empName.slice(10, 13);
let username = firstName + lastName;
console.log("Username: " + username);Code language: JavaScript (javascript)Here is what would show in the console for the above code:
Username: JohnSmithCode language: Bash (bash)Real-World Example Two
Scenario: Susie owns and maintains a blog reviewing books. She wants to sort the books alphabetically by the title of the book. She has three strings called book1, book2, and book3 respectively, and wants to extract just the first three letters of each in order to later alphabetize them on her blog. Below is the code that will extract the first three letters of the book1, book2, and book3 variable using the js slice method:
let book1 = "Sticks and Stones";
let book2 = "Milk and Honey";
let book3 = "The Boy Named Jake";
let book1 = book1.slice(0, 3);
let book2 = book2.slice(0, 3);
let book3 = book3.slice(0, 3);Code language: JavaScript (javascript)Below is what the three string variables would look like if Susie displayed them on her website:
book1 = "Sti";
book2 = "Mil";
book3 = "The"; Code language: Bash (bash)Real-World Example Three
Scenario: Zach is making a website with a super-secret password that is needed to get into the website. He knows that the secret password is the middle two words of his website’s title, which is Secrets to Website Making. Below is how he will extract the middle two words of his title using the JavaScript Slice method:
let title = "Secrets to Website Making";
let password = title.slice(8, 17);Code language: JavaScript (javascript)Below is what the password would look like after extracting the words using the js slice method:
password = "to Website";Code language: Bash (bash)Wrapping Up
We hope you have a better understanding of how to use the JavaScript Slice method with string variables in JavaScript. This website below allows you to take your own work for a spin and run code in a virtual environment so you don’t compromise any of your data by experimenting with your own IDE.