Javascript | String Methods

Hello my beginner frontend developers, today i will be showing Javascript string methods in 2 different categories - Important and rarely used.

Let's get started...

Important String methods

const str = "Hello World";

// IMPORTANT

// 1. length - 11 - returns the string length including spaces
console.log(str.length);

// 2. search - true - search for the passed regex and returns boolean
const stringSearch = str.search("World");

// 3. slice
/**
 * The slice() method extracts a section of a string and 
 * returns the extracted part in a new string, without modifying the original string.
 * It can accept 2 parameters - start-index(inclusive) and end-index(exclusive)
 */
const stringSlice = str.slice(0, 5); // Hello - Extracts first 5 characters from the string

// 4. toLowerCase - hello world - converts entire string to lowercase
const stringToLowerCase = str.toLowerCase();

// 5. toUpperCase - HELLO WORLD -  converts entire string to uppercase
const stringToUpperCase = str.toUpperCase();

// 6. trim - remove the white space from start and end of the strings
const stringTrim = str.trim();

// 7. startsWith - true - check if the string starts with the passed string value
const stringStartsWith = str.startsWith("Hell");

// 8. includes - true - check if the string includes the passed string value
const stringIncludes = str.includes("Hello");

Rarely used

// NOT USED MUCH
// 9. indexOf - Returns the position of the first occurrence of a given string
const stringIndexOf = str.indexOf("World"); // 6

// 10. charAt - Returns the character at the specified index
const stringCharAt = str.charAt(0); // H

// 11. charCodeAt - Returns the Unicode of the character at the specified index
const stringCharCodeAt = str.charCodeAt(0); // 72

// 12. substring - Returns the part of the string from the start index to the end index
const stringSubstring = str.substring(0, 5); // Hello

// 13. lastIndexOf - Returns the position of the last occurrence of a given string
const stringLastIndexOf = str.lastIndexOf("World"); // 6

// 14. split - Splits a string into an array of substrings using the specified separator which is empty space here
const stringSplit = str.split(" "); // [ 'Hello', 'World' ]

// 15. replace - Replaces first occurrence of a substring
const stringReplace = str.replace("World", "JS"); // Hello JS

// 16. replaceAll - Replaces all occurrences of a substring (ES11)
const stringReplaceAll = str.replaceAll("World", "JS"); // Hello JS

// 17. repeat - Returns a new string with the specified number of copies of the original string
const stringRepeat = str.repeat(3); // Hello WorldHello WorldHello World

// 18. endsWith - Checks if a string ends with the specified string
const stringEndsWith = str.endsWith("ld"); // true

// 19. concat - Concatenates two or more strings and returns a new string
const stringConcat = str.concat("Mr.", "HTML"); // Hello WorldMr.HTML

Which method according to you is more or less important in a real world project?

THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - [e-mail]

You can help me with some donation at the link below Thank you👇👇
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well

Button Component with CVA and Tailwind

Shubham Tiwari ・ Feb 12

#nextjs #react #webdev #typescript

08:22

MicroFrontend - React | Solid | Vue

Shubham Tiwari ・ Jan 9

#tutorial #webdev #beginners #learning

15:48

Codium | AI Assistant for DEVs

Shubham Tiwari ・ Jan 4

#vscode #learning #tutorial #beginners

05:25

Zustand - A beginners guides

Shubham Tiwari ・ Nov 21 '23

#webdev #tutorial #react #javascript

Comments

[lionel-rowe]

// 2. search - true - search for the passed string and returns boolean
const stringSearch = str.search("World");

No, it searches for the passed regex and returns a number (the index of the match). If a string is passed, it's coerced to a regex before searching.

'abc.'.search('.') // 0
'$abc'.search('$') // 4
'[abc'.search('[') // throws Uncaught SyntaxError: Invalid regular expression

[Shubham Tiwari]

Yeah true, thanks for covering these cases

[Noman Abid]

Please correct your 5th point

[Shubham Tiwari]

Thanks for the correction bro 🫡