Sometimes I wonder if I were still my old 2010 Windows 7 PC with UC Browser in big 2026 would modern websites even work on it?
Some visitors are still using Internet Explorer or Safari till date and we cant write modern code and expect it to work for them.
So in this blog we will cover :-
- What string methods are
- Why developers write polyfills
- Common interview string problems
- Importance of understanding built-in behavior
String methods
Before hopping into the Polyfills we have to know what and where we use this modern javascript by lookin into some string methods and making our own string methods by using polyfills.
In JavaScript strings are the sequence of character and JavaScript provides a set of methods to manipulate and work with string.
I will **introduce only 2 main string method **here and rest you can do with your own
- toUpperCase()
If you want to convert a string to uppercase, Then you can use toUpperCase() method.
const str = "like this blog"
console.log("Uppercase :-" , str.toUpperCase())
Using polyfills
String.prototype.toOwnUpperCase = function () {
let result = "";
for (let i = 0; i < this.length; i++) {
let code = this.charCodeAt(i);
// a-z → A-Z
if (code >= 97 && code <= 122) {
code = code - 32;
}
result += String.fromCharCode(code); // number to char
}
return result;
};
console.log("hello".toOwnUpperCase()) // HELLO
- trim()
If you want to trim the starting and ending empty space from the string , then you can use time()
const str = " Like this blog. ";
const trimmedStr = str.trim();
console.log(trimmedStr); // Output: This is a string.
Using polyfills
String.prototype.myOwnTrim = function () {
let start = 0;
let end = this.length - 1;
while (start <= end && this[start] === " ") start++;
while (end >= start && this[end] === " ") end--;
let result = "";
for (let i = start; i <= end; i++) {
result += this[i];
}
return result;
};
console.log(" Like this blog. ".myOwnTrim()) //Like this blog.
Hope you have a rough idea what are polyfills and how we can write our own
but why does developer use polyfills let see.
Why developers write polyfills
Developer write polyfills as some of your website visitors use old internet explorer or UC browser and we don't use modern JavaScript for them because old browser doesn't understand modern JavaScript
Faced with the reality that you cant write modern code and expect it to work for all users, You have exactly two choice
Only use language features available in all the browser you support
Write modern code and do something to make it work in older browser
Yes obvious you choose option 2 if you choose option 1 i am sorry you need to take some rest.
I hope you have now understand what are polyfills and why developers use
polyfills. Now you are interview ready lets see some common question asked in interview
Common interview string problems
I have covered 2 most important example before and covering 2 more now that actually asked by the interviewer.
- .includes()
The .includes() method return true if a string contain a specific string.
let see first how we write this in modern javascript and then we make our own
let text = "Like this blog";
let result = text.includes("blog");
console.log(result) // true
Using polyfills
String.prototype.myIncludes = function (word, search = 0) {
if (search === "") return true;
for (let i = 0; i < this.length - word.length; i++) {
let match = true;
for (let j = 0; j < word.length; j++) {
if (this[i + j] !== word[j]) {
match = false;
break;
}
}
if (match) return true;
}
return false
};
console.log("abc".myIncludes("d")); //false
- .startsWith() / .endsWith()
The .startsWith() / .endsWith() method returns true if a string ends/starts with a specific string
let text = "Hello world";
let result = text.endsWith("world");
console.log(result) // true
Using polyfills
String.prototype.myStartsWith = function (search, position = 0) {
for (let i = 0; i < search.length; i++) {
if (this[position + i] !== search[i]) return false;
}
return true;
};
console.log("abc".startsWith("d"))// false
Importance of understanding built-in behavior
When you working with JavaScript string methods its not enough to know what they do you should also understand how they behave internally
Build in methods often have small edge cases that can be easily missed.
For example :
" Like this blog ".trim()
It might feel unexpected but .trim() always removes starting and ending space from the string if you don't know this behavior your polyfill might be incorrect.
Thanks for reading ! if enjoyed this blog , you can read more on this 👇
Top comments (0)