JavaScript Strings and Numbers - Complete Guide
Strings and numbers are fundamental data types in JavaScript. This guide covers everything you need to know about working with them effectively.
Strings
String Methods
JavaScript provides many useful string methods:
str.includes("text") // Returns true if string contains "text" (like Java's contains)
str.lastIndexOf("text") // Returns last index of "text"
str.substr(start, length) // Returns substring by length
str.slice(start, end) // Returns substring (like substring, allows negative numbers)
str.length // Returns string length
Template Literals (ES6)
Template literals allow embedded expressions:
const name = "World";
const greeting = `Hello ${name}!`; // "Hello World!"
const completed = true;
console.log(`Status: ${completed}`); // "Status: true"
String Compatibility Note
Avoid accessing strings like arrays in older browsers:
str[0]; // Does not work in IE5, IE6, IE7
str.split("")[0]; // Use this instead for compatibility
Numbers
Parsing Numbers
parseInt("10") // Returns 10
Number.isInteger(num) // Check if number is an integer
// Check if value is a valid number
Number.isInteger(parseInt("1")) // true
Special Number Values
Infinity
var myNumber = 2;
while (myNumber != Infinity) {
myNumber = myNumber * myNumber; // Eventually reaches Infinity
}
var x = 2 / 0; // Infinity
typeof Infinity; // Returns "number"
NaN (Not a Number)
var x = 100 / "Apple"; // NaN
isNaN(x); // true
Number Formatting with toFixed()
var x = 9.656;
x.toFixed(0); // Returns "10"
x.toFixed(2); // Returns "9.66"
Floating Point Precision Issues
JavaScript uses floating point arithmetic which can cause precision issues:
var x = 0.1;
var y = 0.2;
var z = x + y; // 0.30000000000000004 (not 0.3!)
// Solution: Use integer math
var z = (x * 10 + y * 10) / 10; // 0.3
Regular Expressions
Regular expressions provide powerful pattern matching for strings.
Replace with Regex
// Replace all occurrences (global flag)
str = "Please visit Microsoft and Microsoft!";
var result = str.replace(/Microsoft/g, "W3Schools");
// Case-insensitive replacement
var result = str.replace(/microsoft/i, "W3Schools");
Testing Patterns
var pattern = /e/;
pattern.test("The best things in life are free!"); // Returns true
Extracting Matches
/e/.exec("The best things in life are free!"); // Returns "e"
Custom Prototypes
You can extend built-in types with custom methods:
// Add a contains method to String prototype
String.prototype.contains = function(text) {
return this.indexOf(text) != -1;
};
// Usage
"Hello World".contains("World"); // true
Note: While possible, extending built-in prototypes is generally not recommended in production code as it can cause conflicts with other libraries.
Practical Examples
Validating User Input
function isValidNumber(input) {
const num = parseInt(input);
return !isNaN(num) && Number.isInteger(num);
}
isValidNumber("42"); // true
isValidNumber("3.14"); // false (not an integer after parseInt)
isValidNumber("hello"); // false
Formatting Currency
function formatCurrency(amount) {
return "$" + amount.toFixed(2);
}
formatCurrency(19.5); // "$19.50"
formatCurrency(100); // "$100.00"
Checking for Substrings
const text = "JavaScript is awesome!";
// Modern approach (ES6+)
text.includes("awesome"); // true
// Older approach (pre-ES6)
text.indexOf("awesome") !== -1; // true
Understanding strings and numbers is essential for any JavaScript developer. These fundamental operations form the building blocks for more complex data manipulation tasks.
Comments