JavaScript Strings and Their Functions — Detailed Guide
In JavaScript, a string is a sequence of characters used to represent text. You can create
strings using single quotes (' '), double quotes (" "), or backticks (` `). Strings are immutable,
meaning their characters cannot be changed directly. Below is a detailed explanation of
each major string function in JavaScript with examples.
1. length
Returns the number of characters in a string, including spaces and symbols.
Syntax:
[Link]
Example:
let text = 'JavaScript';
[Link]([Link]);
Output:
10
2. charAt(index)
Returns the character at a specific position (index). The index starts from 0.
Syntax:
[Link](index)
Example:
let text = 'Hello';
[Link]([Link](1));
Output:
'e'
3. concat()
Joins two or more strings into one new string.
Syntax:
[Link](string2, string3, ...)
Example:
let str1 = 'Hello';
let str2 = 'World';
[Link]([Link](' ', str2));
Output:
'Hello World'
4. includes(substring)
Checks if a string contains a specified substring. Case-sensitive.
Syntax:
[Link](substring)
Example:
let text = 'JavaScript is fun';
[Link]([Link]('fun'));
Output:
true
5. indexOf(value)
Returns the index of the first occurrence of a substring. Returns -1 if not found.
Syntax:
[Link](value)
Example:
let text = 'Hello World';
[Link]([Link]('World'));
Output:
6
6. lastIndexOf(value)
Returns the index of the last occurrence of a substring.
Syntax:
[Link](value)
Example:
let text = 'Hello Hello';
[Link]([Link]('Hello'));
Output:
6
7. slice(start, end)
Extracts a section of a string and returns it as a new string. Accepts negative indexes.
Syntax:
[Link](start, end)
Example:
let text = 'JavaScript';
[Link]([Link](0, 4));
Output:
'Java'
8. substring(start, end)
Similar to slice(), but does not accept negative indexes.
Syntax:
[Link](start, end)
Example:
let text = 'JavaScript';
[Link]([Link](4, 10));
Output:
'Script'
9. substr(start, length)
Extracts a part of the string, starting at an index and continuing for a specified length.
Syntax:
[Link](start, length)
Example:
let text = 'JavaScript';
[Link]([Link](0, 4));
Output:
'Java'
10. replace(oldValue, newValue)
Replaces a specified substring with another string. Use /g flag in regex for all occurrences.
Syntax:
[Link](oldValue, newValue)
Example:
let text = 'I love Java';
[Link]([Link]('Java', 'JavaScript'));
Output:
'I love JavaScript'
11. toUpperCase()
Converts a string to uppercase letters.
Syntax:
[Link]()
Example:
let text = 'hello';
[Link]([Link]());
Output:
'HELLO'
12. toLowerCase()
Converts a string to lowercase letters.
Syntax:
[Link]()
Example:
let text = 'HELLO';
[Link]([Link]());
Output:
'hello'
13. trim()
Removes whitespace from both ends of a string.
Syntax:
[Link]()
Example:
let text = ' Hello World! ';
[Link]([Link]());
Output:
'Hello World!'
JavaScript Date Object
The JavaScript Date object is used to handle dates and times. It provides methods to create,
format, compare, and manipulate date and time values. Internally, dates are represented as
the number of milliseconds since January 1, 1970 (the Unix Epoch).
Creating Date Objects
You can create a Date object using the `new Date()` constructor in several ways:
1. Current Date and Time
let now = new Date();
[Link](now);
Output:
2025-10-09T12:30:45.123Z
2. Specific Date
let date1 = new Date('2025-10-09');
[Link](date1);
Output:
Thu Oct 09 2025 00:00:00 GMT+0000 (UTC)
3. Specific Date and Time
let date2 = new Date(2025, 9, 9, 14, 30, 0);
[Link](date2);
Output:
Thu Oct 09 2025 14:30:00 GMT+0000 (UTC)
4. Milliseconds Since Epoch
let date3 = new Date(0);
[Link](date3);
Output:
Thu Jan 01 1970 00:00:00 GMT+0000 (UTC)
Getting Date Components
You can extract specific parts of a date using the following methods:
Function Description Example
getFullYear() Returns the year 2025
getMonth() Returns month (0–11) 9
getDate() Returns day of month (1– 9
31)
getDay() Returns weekday (0–6; 4
Sunday=0)
getHours() Returns hour (0–23) 14
getMinutes() Returns minutes 30
getSeconds() Returns seconds 45
getMilliseconds() Returns milliseconds 123
getTime() Milliseconds since Epoch 1750000000000
JavaScript Math Object
The JavaScript Math object is a built-in static object that provides properties and methods
for mathematical calculations, including rounding, trigonometry, logarithms, random
numbers, and constants. It cannot be instantiated — all its properties and methods are
static and can be accessed directly using `[Link]()`.
Math Constants
Constant Description Example Value
[Link] Ratio of circumference to 3.141592653589793
diameter
Math.E Euler’s number 2.718281828459045
Rounding Methods
JavaScript provides multiple methods to round numbers up, down, or to the nearest integer.
Method Description Example Output
[Link](x) Rounds to nearest [Link](4.6) 5
integer
[Link](x) Rounds down [Link](4.9) 4
[Link](x) Rounds up [Link](4.1) 5
[Link](x) Removes decimal [Link](4.9) 4
part
Power and Roots
Method Description Example Output
[Link](x, y) x raised to power y [Link](2, 3) 8
[Link](x) Square root [Link](16) 4
Absolute and Sign Functions
Method Description Example Output
[Link](x) Absolute value [Link](-10) 10
[Link](x) Sign (-1, 0, or 1) [Link](-5) -1
Min and Max Values
Method Description Example Output
[Link](a, b, c, ...) Smallest number [Link](1, 5, -3) -3
[Link](a, b, c, ...) Largest number [Link](1, 5, -3) 5
JavaScript Array Object
The JavaScript Array object allows you to store multiple values in a single variable. It
provides a variety of methods for traversing, modifying, sorting, filtering, and manipulating
lists of data.
Creating Arrays
Method Syntax Example
Array Literal [] let arr = [1, 2, 3];
Empty Array [] let arr = [];
Accessing and Modifying Elements
Arrays are zero-indexed. The first element is at index 0. You can access or change elements
using bracket notation.
let fruits = ['Apple', 'Banana', 'Cherry'];
[Link](fruits[0]); // Apple
fruits[1] = 'Mango';
[Link](fruits); // ['Apple', 'Mango', 'Cherry']
Array Properties
Property Description Example
length Returns number of [Link]
elements
Adding and Removing Elements
Method Description Example Output
push() Adds element at end [Link]('Grapes') Adds 'Grapes'
pop() Removes last [Link]() Removes last
element element
unshift() Adds element at [Link]('Kiwi') Adds 'Kiwi'
start
shift() Removes first [Link]() Removes first
element element
Core and Client-Side JavaScript Objects
In JavaScript, objects are categorized mainly into Core (or Built-in) Objects and Client-Side
Objects. Core objects are part of the ECMAScript language specification, while client-side
objects are provided by the browser to interact with web pages and the Document Object
Model (DOM).
1. Core (Built-in) JavaScript Objects
These are predefined objects that are part of the ECMAScript standard and are available in
all JavaScript environments, including browsers and [Link]. They form the foundation of
the JavaScript language.
Object Description Example
Object Base object for all other let obj = {name: 'Alice'};
objects.
Array Stores multiple values in let arr = [1, 2, 3];
one variable.
String Represents text data. let s = 'Hello';
Number Represents numeric values. let n = 42;
Boolean Represents true or false. let flag = true;
Date Used for working with dates let today = new Date();
and times.
Math Provides mathematical [Link](16);
constants and functions.
RegExp Used for pattern matching /[A-Z]/.test('Hi');
and text searching.
Error Handles errors and throw new Error('Oops!');
exceptions.
Function Defines a reusable block of function greet() { return
code. 'Hi'; }
These objects are always available by default and provide the foundation for computation,
data manipulation, and control flow.
2. Client-Side JavaScript Objects
Client-side objects are provided by the browser to allow JavaScript to interact with the web
page and user. They exist only in browser environments and provide access to the DOM,
browser history, location, and more.
Object Description Example
window Represents the [Link]('Hello');
browser window or
tab.
document Represents the [Link]('demo').innerText
HTML document. = 'Hi';
navigator Gives browser and [Link];
device information.
screen Provides screen size [Link];
and color info.
location Contains current [Link];
URL information.
history Allows navigation [Link]();
through browser
history.
console Used for debugging [Link]('Debug');
and logging.
fetch Used for making fetch('[Link]
HTTP requests.
localStorage Stores data in the [Link]('name', 'John');
browser
permanently.
sessionStorage Stores data for one [Link]('id', '123');
session.
3. Key Differences Between Core and Client-Side Objects
Feature Core Objects Client-Side Objects
Environment Available in all JavaScript Available only in browsers
engines
Purpose Logic, computation, data DOM and browser
manipulation interaction
Examples Array, Date, Math window, document,
navigator
Dependency Part of ECMAScript Provided by Browser APIs
standard
Usage Area Works in both [Link] and Works only in browsers
browsers
