Mobile App Now Available

Master Interviews
Anywhere, Anytime

Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.

Get it on

Google Play

4.9/5 Rating on Store

Subject page

Javascript · Question Set

Strings and Template Literals – Javascript interview questions

Strings and Template Literals interview questions for placements and exams.

Subject: JavascriptDifficulty: Mixed15 questions in this set

Set overview

Questions

Included in this set

Subject

Javascript

Explore more sets

Difficulty

Mixed

Level of this set

Javascript – Strings and Template Literals questions (15)

Go through each question and its explanation. Use this set as a focused practice pack for Javascript.

Back to Javascript subject page

1. Are strings mutable or immutable in JavaScript?

Difficulty: EasyType: MCQTopic: String Methods

Strings are immutable in JavaScript. Once created, you cannot change individual characters. Attempts to modify characters are ignored in non-strict mode or throw errors in strict mode. String methods like replace, toUpperCase, and slice create new strings instead of modifying the original. You can reassign the variable to a new string, but the original string value never changes. This is different from arrays, which are mutable. Immutability makes strings safer and more predictable.

Example code

let str = 'Hello';

// Cannot change individual characters
str[0] = 'J';
console.log(str); // 'Hello' (unchanged)

// In strict mode, this would throw an error
'use strict';
// str[0] = 'J'; // TypeError in strict mode

// String methods create new strings
let original = 'hello';
let upper = original.toUpperCase();
console.log(original); // 'hello' (unchanged)
console.log(upper);    // 'HELLO' (new string)

let text = 'JavaScript';
let replaced = text.replace('Java', 'Type');
console.log(text);     // 'JavaScript' (unchanged)
console.log(replaced); // 'TypeScript' (new string)

// Can reassign variable (not modifying string)
let name = 'John';
name = 'Jane'; // New string assigned

// Compare with mutable arrays
let arr = [1, 2, 3];
arr[0] = 10; // Works! Arrays are mutable
console.log(arr); // [10, 2, 3]

Continue your preparation

For complete preparation, combine this set with full subject-wise practice for Javascript. You can also explore other subjects and sets from the links below.

Quick navigation:Javascript subject page•All subjects

6. What are template literals and what are their advantages over regular strings? Explain with examples.

Difficulty: MediumType: SubjectiveTopic: Modern Syntax

Template literals are string literals using backticks that provide enhanced string functionality introduced in ES6. Key features: String interpolation allows embedding expressions using dollar sign and curly braces. Any JavaScript expression can be embedded including variables, calculations, and function calls. Multi-line strings work naturally without escape characters. Just press enter to create new lines. This makes code much more readable. Expression evaluation happens automatically. The result is converted to a string and inserted. Advantages over regular strings: Cleaner syntax for string concatenation. No need for plus operators. Easier to read, especially with variables. Natural multi-line support without backslash n. Can embed any expression, not just variables. Better for creating HTML templates. Tagged templates for advanced use cases: You can create custom string processing by tagging template literals with a function. The function receives string parts and values separately. Useful for internationalization, styling, or sanitization. Common use cases: Building dynamic messages. Creating HTML markup. SQL queries with parameters. Formatting output. Logging with context. Template literals are one of the most useful ES6 features and are used extensively in modern JavaScript and frameworks like React.

Example code

const name = 'John';
const age = 30;
const city = 'New York';

// STRING INTERPOLATION

// Old way
const oldWay = 'My name is ' + name + ', I am ' + age + ' years old';

// Template literal way (cleaner)
const newWay = `My name is ${name}, I am ${age} years old`;
console.log(newWay);

// EXPRESSIONS

// Any expression works
console.log(`Double age: ${age * 2}`);
console.log(`Next year: ${age + 1}`);
console.log(`Name length: ${name.length}`);

// Function calls
function getGreeting() {
  return 'Hello';
}
console.log(`${getGreeting()}, ${name}!`);

// Ternary operators
const status = `User is ${age >= 18 ? 'adult' : 'minor'}`;
console.log(status);

// MULTI-LINE STRINGS

// Old way (messy)
const oldMultiLine = 'Line 1\n' +
                     'Line 2\n' +
                     'Line 3';

// Template literal way (natural)
const newMultiLine = `
  Line 1
  Line 2
  Line 3
`;

// HTML TEMPLATES

const user = {
  name: 'Jane',
  email: 'jane@example.com',
  role: 'Admin'
};

const userCard = `
  <div class="user-card">
    <h2>${user.name}</h2>
    <p>Email: ${user.email}</p>
    <span class="badge">${user.role}</span>
  </div>
`;

// Dynamic lists
const items = ['Apple', 'Banana', 'Orange'];
const list = `
  <ul>
    ${items.map(item => `<li>${item}</li>`).join('')}
  </ul>
`;

// TAGGED TEMPLATES (advanced)

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    return result + str + (values[i] ? `<mark>${values[i]}</mark>` : '');
  }, '');
}

const highlighted = highlight`Hello ${name}, you are ${age} years old`;
console.log(highlighted);
// 'Hello <mark>John</mark>, you are <mark>30</mark> years old'

// PRACTICAL EXAMPLES

// API URL building
const userId = 123;
const apiUrl = `https://api.example.com/users/${userId}/posts`;

// SQL queries (be careful with injection!)
const query = `
  SELECT * FROM users
  WHERE name = '${name}'
  AND age > ${age}
`;

// Logging with context
console.log(`[${new Date().toISOString()}] User ${name} logged in`);

// Nested templates
const data = {
  users: [{name: 'John', age: 30}, {name: 'Jane', age: 25}]
};

const table = `
  <table>
    ${data.users.map(user => `
      <tr>
        <td>${user.name}</td>
        <td>${user.age}</td>
      </tr>
    `).join('')}
  </table>
`;

7. How do you compare strings in JavaScript? Explain case-sensitive and case-insensitive comparison.

Difficulty: EasyType: SubjectiveTopic: String Methods

JavaScript provides multiple ways to compare strings. Equality operators: Triple equals compares strings by value and is case-sensitive. Returns true only if characters and case match exactly. Double equals also compares by value but performs type coercion. For strings, it behaves the same as triple equals. Always use triple equals for string comparison. Case-sensitive comparison: Direct comparison with triple equals. Capital and lowercase letters are different. This is the default behavior. Case-insensitive comparison: Convert both strings to same case using toLowerCase or toUpperCase before comparing. This is the standard approach. LocaleCompare for sorting: The localeCompare method compares strings for sorting purposes. Returns minus 1 if first string comes before second, 0 if equal, 1 if after. Supports locale-aware sorting for international characters. Can be case-insensitive with options. Common patterns: Check if strings match. Check if string starts or ends with substring. Check if string contains substring. Sort array of strings. String comparison is case-sensitive by default, which catches many beginners. Always normalize case when needed for user input.

Example code

// CASE-SENSITIVE COMPARISON (default)

const str1 = 'Hello';
const str2 = 'hello';
const str3 = 'Hello';

// Equality
console.log(str1 === str3); // true (exact match)
console.log(str1 === str2); // false (different case)

// Always use === for strings
console.log('hello' === 'hello'); // true
console.log('5' === '5');         // true

// CASE-INSENSITIVE COMPARISON

// Method 1: Convert to lowercase
const name1 = 'JOHN';
const name2 = 'john';

if (name1.toLowerCase() === name2.toLowerCase()) {
  console.log('Names match!'); // This runs
}

// Method 2: Convert to uppercase
if (name1.toUpperCase() === name2.toUpperCase()) {
  console.log('Names match!');
}

// PRACTICAL EXAMPLES

// User login (case-insensitive username)
function login(username, password) {
  const storedUsername = 'JohnDoe';
  const storedPassword = 'secret123';
  
  if (username.toLowerCase() === storedUsername.toLowerCase() &&
      password === storedPassword) {
    return 'Login successful';
  }
  return 'Invalid credentials';
}

console.log(login('johndoe', 'secret123')); // 'Login successful'
console.log(login('JOHNDOE', 'secret123')); // 'Login successful'

// LOCALE COMPARE (for sorting)

const words = ['banana', 'Apple', 'cherry'];

// Default sort (lexicographic)
words.sort();
console.log(words); // ['Apple', 'banana', 'cherry']

// Case-insensitive sort
words.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
console.log(words); // ['Apple', 'banana', 'cherry']

// localeCompare returns -1, 0, or 1
console.log('a'.localeCompare('b')); // -1 (a comes before b)
console.log('b'.localeCompare('a')); // 1 (b comes after a)
console.log('a'.localeCompare('a')); // 0 (equal)

// Case-insensitive with localeCompare
const result = 'Hello'.localeCompare('hello', undefined, {sensitivity: 'base'});
console.log(result); // 0 (equal, ignoring case)

// SUBSTRING COMPARISON

const text = 'JavaScript Programming';

// startsWith (case-sensitive)
console.log(text.startsWith('Java'));  // true
console.log(text.startsWith('java'));  // false

// Case-insensitive startsWith
function startsWithIgnoreCase(str, search) {
  return str.toLowerCase().startsWith(search.toLowerCase());
}
console.log(startsWithIgnoreCase(text, 'java')); // true

// includes (case-sensitive)
console.log(text.includes('Script')); // true
console.log(text.includes('script')); // false

// Case-insensitive includes
function includesIgnoreCase(str, search) {
  return str.toLowerCase().includes(search.toLowerCase());
}
console.log(includesIgnoreCase(text, 'script')); // true

8. How do you reverse a string in JavaScript? Explain multiple approaches.

Difficulty: MediumType: SubjectiveTopic: String Methods

There is no built-in method to reverse a string in JavaScript, but there are several approaches. Approach 1: Split Reverse Join Split string into array of characters. Use array reverse method. Join array back to string. This is the most common and readable approach. Approach 2: For Loop Loop through string backwards from end to start. Build new string by concatenating characters. More verbose but shows understanding of loops. Approach 3: Reduce Use reduce on array of characters. Prepend each character to accumulator. Functional programming style. Approach 4: Recursion Recursively take last character and add to reversed rest of string. Good for interviews to show recursion knowledge. Not practical for long strings due to stack limit. Approach 5: Array From with Map Use Array from with mapping function. Access characters in reverse order. More concise but less readable. Best approach: Split reverse join is the standard solution. It is readable, short, and efficient. Use this in production code. Common mistakes: Trying to reverse string directly. Forgetting strings are immutable. Not handling Unicode characters properly. String reversal is a classic interview question testing array manipulation and understanding of immutability.

Example code

const str = 'Hello World';

// APPROACH 1: Split, Reverse, Join (most common)
function reverseString1(str) {
  return str.split('').reverse().join('');
}
console.log(reverseString1(str)); // 'dlroW olleH'

// One-liner
const reversed = str.split('').reverse().join('');

// APPROACH 2: For Loop (backwards)
function reverseString2(str) {
  let reversed = '';
  for (let i = str.length - 1; i >= 0; i--) {
    reversed += str[i];
  }
  return reversed;
}
console.log(reverseString2(str)); // 'dlroW olleH'

// APPROACH 3: For Loop (forwards)
function reverseString3(str) {
  let reversed = '';
  for (let char of str) {
    reversed = char + reversed; // Prepend
  }
  return reversed;
}
console.log(reverseString3(str));

// APPROACH 4: Reduce
function reverseString4(str) {
  return str.split('').reduce((reversed, char) => char + reversed, '');
}
console.log(reverseString4(str));

// APPROACH 5: Recursion
function reverseString5(str) {
  if (str === '') return '';
  return reverseString5(str.slice(1)) + str[0];
}
console.log(reverseString5(str));

// Alternative recursion
function reverseString6(str) {
  return str.length <= 1 ? str : reverseString6(str.slice(1)) + str[0];
}

// APPROACH 6: Array.from with map
function reverseString7(str) {
  return Array.from(str, (_, i) => str[str.length - 1 - i]).join('');
}
console.log(reverseString7(str));

// APPROACH 7: Spread operator
function reverseString8(str) {
  return [...str].reverse().join('');
}
console.log(reverseString8(str));

// PERFORMANCE COMPARISON
console.time('split-reverse-join');
for (let i = 0; i < 100000; i++) {
  str.split('').reverse().join('');
}
console.timeEnd('split-reverse-join');

console.time('for-loop');
for (let i = 0; i < 100000; i++) {
  let r = '';
  for (let j = str.length - 1; j >= 0; j--) r += str[j];
}
console.timeEnd('for-loop');

// HANDLING UNICODE (emojis)
const emoji = 'Hello 👋 World 🌍';

// Wrong way (breaks emojis)
console.log(emoji.split('').reverse().join(''));
// '🌍 dlroW 👋 olleH' (might show broken emojis)

// Correct way for Unicode
function reverseStringUnicode(str) {
  return [...str].reverse().join('');
}
console.log(reverseStringUnicode(emoji));

// PRACTICAL USE CASES

// Check if palindrome
function isPalindrome(str) {
  const cleaned = str.toLowerCase().replace(/[^a-z0-9]/g, '');
  return cleaned === cleaned.split('').reverse().join('');
}
console.log(isPalindrome('A man a plan a canal Panama')); // true
console.log(isPalindrome('hello')); // false

9. How do you check if a string is empty or contains only whitespace in JavaScript?

Difficulty: EasyType: SubjectiveTopic: String Methods

Checking for empty or whitespace-only strings is common in form validation and data processing. Empty string check: Compare length property to zero. Or compare directly to empty string with triple equals. Or use logical NOT for falsy check, but be careful as it also catches undefined and null. Whitespace-only check: Use trim method and check if result is empty. This removes all leading and trailing whitespace. If trimmed string is empty, original contained only whitespace. Common validation patterns: Check if string exists and has content. Check if string is not just spaces. Validate user input before processing. Provide user feedback for invalid input. Edge cases to consider: Null and undefined are not empty strings. Zero is not an empty string. Tab and newline characters are whitespace. Empty array converted to string is empty string. Best practices: Always trim user input before validation. Check for both null or undefined and empty. Provide clear error messages. Use helper functions for reusability. String validation is essential for building robust applications that handle user input correctly.

Example code

// CHECK IF STRING IS EMPTY

// Method 1: Check length
function isEmpty(str) {
  return str.length === 0;
}

console.log(isEmpty(''));      // true
console.log(isEmpty('hello')); // false

// Method 2: Direct comparison
function isEmpty2(str) {
  return str === '';
}

// Method 3: Falsy check (careful!)
if (!str) {
  // This catches '', undefined, null
  console.log('Empty or falsy');
}

// CHECK IF STRING IS EMPTY OR WHITESPACE

// Method 1: Trim and check (best)
function isEmptyOrWhitespace(str) {
  return str.trim().length === 0;
}

console.log(isEmptyOrWhitespace(''));        // true
console.log(isEmptyOrWhitespace('   '));    // true
console.log(isEmptyOrWhitespace('\t\n'));   // true
console.log(isEmptyOrWhitespace('hello'));  // false

// Method 2: Regex
function isEmptyOrWhitespace2(str) {
  return /^\s*$/.test(str);
}

// HANDLE NULL/UNDEFINED

function isNullOrEmpty(str) {
  return !str || str.trim().length === 0;
}

console.log(isNullOrEmpty(null));      // true
console.log(isNullOrEmpty(undefined)); // true
console.log(isNullOrEmpty(''));        // true
console.log(isNullOrEmpty('   '));    // true
console.log(isNullOrEmpty('hello'));  // false

// FORM VALIDATION EXAMPLE

function validateForm(formData) {
  const errors = [];
  
  // Check username
  if (!formData.username || formData.username.trim().length === 0) {
    errors.push('Username is required');
  }
  
  // Check email
  if (!formData.email || formData.email.trim().length === 0) {
    errors.push('Email is required');
  }
  
  // Check if string has minimum length
  if (formData.password && formData.password.trim().length < 8) {
    errors.push('Password must be at least 8 characters');
  }
  
  return errors;
}

const errors = validateForm({
  username: '  ',
  email: '',
  password: 'short'
});
console.log(errors);
// ['Username is required', 'Email is required', 'Password must be...']

// REUSABLE VALIDATION HELPERS

const StringUtils = {
  isEmpty: (str) => !str || str.length === 0,
  
  isBlank: (str) => !str || str.trim().length === 0,
  
  hasContent: (str) => str && str.trim().length > 0,
  
  hasMinLength: (str, min) => str && str.trim().length >= min,
  
  isNotEmpty: (str) => str && str.length > 0
};

// Usage
const input = '  hello  ';
console.log(StringUtils.isEmpty(input));    // false
console.log(StringUtils.isBlank(input));    // false
console.log(StringUtils.hasContent(input)); // true

// EDGE CASES

console.log(isEmpty(null));      // TypeError (cannot read length)
console.log(isEmpty(undefined)); // TypeError
console.log(isEmpty(0));         // TypeError

// Safe check
function safeIsEmpty(str) {
  return typeof str === 'string' && str.length === 0;
}

console.log(safeIsEmpty(null));  // false
console.log(safeIsEmpty(''));    // true

13. Explain the most commonly used string methods in JavaScript with examples.

Difficulty: MediumType: SubjectiveTopic: String Methods

JavaScript provides many built-in string methods for manipulation and searching. Extraction methods: Slice extracts a portion using start and end indices. Accepts negative indices to count from end. Most versatile extraction method. Substring similar to slice but does not accept negative indices. Swaps arguments if start is greater than end. Substr extracts from start index with specified length. Deprecated and should be avoided. Search methods: IndexOf finds first occurrence and returns index or minus 1. LastIndexOf searches from end. Includes returns true or false if substring exists. Modern and cleaner than indexOf. StartsWith checks if string begins with substring. EndsWith checks if string ends with substring. Modification methods: Replace replaces first occurrence. ReplaceAll replaces all occurrences. ToUpperCase and toLowerCase change case. Trim removes whitespace from both ends. TrimStart and trimEnd for one side only. Split divides string into array based on separator. Other useful methods: Repeat repeats string specified number of times. PadStart and padEnd add padding to reach target length. CharAt accesses character at index. All methods return new strings without modifying the original because strings are immutable. Understanding these methods is essential for string manipulation in real applications.

Example code

const str = 'JavaScript Programming';

// EXTRACTION

// slice(start, end)
console.log(str.slice(0, 10));  // 'JavaScript'
console.log(str.slice(-11));    // 'Programming'
console.log(str.slice(4, -1));  // 'Script Programmin'

// substring(start, end)
console.log(str.substring(0, 10)); // 'JavaScript'
console.log(str.substring(4, 10)); // 'Script'

// SEARCH

// indexOf(searchValue, startPosition)
console.log(str.indexOf('a'));      // 1 (first 'a')
console.log(str.indexOf('a', 2));   // 3 (search from index 2)
console.log(str.indexOf('Python'));  // -1 (not found)

// includes(searchValue)
console.log(str.includes('Script')); // true
console.log(str.includes('Python')); // false

// startsWith(), endsWith()
console.log(str.startsWith('Java')); // true
console.log(str.endsWith('ing'));    // true

// MODIFICATION

// replace(search, replacement)
const text = 'I like cats. Cats are great.';
console.log(text.replace('cats', 'dogs'));
// 'I like dogs. Cats are great.' (only first)

console.log(text.replaceAll('cats', 'dogs'));
// 'I like dogs. dogs are great.' (case-sensitive!)

console.log(text.replace(/cats/gi, 'dogs'));
// 'I like dogs. dogs are great.' (case-insensitive)

// toUpperCase(), toLowerCase()
console.log(str.toUpperCase()); // 'JAVASCRIPT PROGRAMMING'
console.log(str.toLowerCase()); // 'javascript programming'

// trim(), trimStart(), trimEnd()
const spaced = '  Hello  ';
console.log(spaced.trim());      // 'Hello'
console.log(spaced.trimStart()); // 'Hello  '
console.log(spaced.trimEnd());   // '  Hello'

// split(separator, limit)
console.log(str.split(' '));     // ['JavaScript', 'Programming']
console.log('a,b,c'.split(','));// ['a', 'b', 'c']
console.log('hello'.split('')); // ['h','e','l','l','o']

// OTHER METHODS

// repeat(count)
console.log('Ha'.repeat(3)); // 'HaHaHa'

// padStart(length, padString)
console.log('5'.padStart(3, '0'));  // '005'
console.log('5'.padEnd(3, '0'));    // '500'

// charAt(index)
console.log(str.charAt(0));  // 'J'
console.log(str.charAt(100));// '' (empty string)

// concat(str1, str2, ...)
console.log('Hello'.concat(' ', 'World')); // 'Hello World'

Master Interviews
Anywhere, Anytime

Strings and Template Literals – Javascript interview questions

Set overview

Javascript – Strings and Template Literals questions (15)

1. Are strings mutable or immutable in JavaScript?

Continue your preparation

2. What does indexOf() return if the substring is not found?

3. Which method converts a string to uppercase?

4. What does the trim() method do?

5. What is the difference between charAt() and bracket notation for accessing characters?

6. What are template literals and what are their advantages over regular strings? Explain with examples.

7. How do you compare strings in JavaScript? Explain case-sensitive and case-insensitive comparison.

8. How do you reverse a string in JavaScript? Explain multiple approaches.

9. How do you check if a string is empty or contains only whitespace in JavaScript?

10. What are template literals in JavaScript?

11. What does the split() method return?

12. How many occurrences does replace() replace by default?

13. Explain the most commonly used string methods in JavaScript with examples.

14. Which is the most efficient way to concatenate strings in a loop?

15. What is the difference between slice() and substring()?

More sets in Javascript

Explore related subjects

Master Interviews Anywhere, Anytime

Strings and Template Literals – Javascript interview questions

Set overview

1. Are strings mutable or immutable in JavaScript?

Continue your preparation

2. What does indexOf() return if the substring is not found?

3. Which method converts a string to uppercase?

4. What does the trim() method do?

5. What is the difference between charAt() and bracket notation for accessing characters?

6. What are template literals and what are their advantages over regular strings? Explain with examples.

7. How do you compare strings in JavaScript? Explain case-sensitive and case-insensitive comparison.

8. How do you reverse a string in JavaScript? Explain multiple approaches.

9. How do you check if a string is empty or contains only whitespace in JavaScript?

10. What are template literals in JavaScript?

11. What does the split() method return?

12. How many occurrences does replace() replace by default?

13. Explain the most commonly used string methods in JavaScript with examples.

14. Which is the most efficient way to concatenate strings in a loop?

15. What is the difference between slice() and substring()?

More sets in Javascript

Explore related subjects

Master Interviews
Anywhere, Anytime