Strings All Versions

Examples

• 7

  Basic info and Strings Concatenation

  edit move example delete share

  7

  Strings in JavaScript can be enclosed in Single quotes 'hello', Double quotes "Hello" and (from ES2015, ES6) in Template Literals (backticks) `hello`.

  var hello  = "Hello";
  var world  = 'world';
  var helloW = `Hello World`;              // ES2015 / ES6
  

  Strings can also be created from other types using the String() function.

  var intString = String(32);
  var booleanString = String(true);
  var stringString = String("string");
  

  Or, toString() can be used to convert Numbers to Strings.

  var intString = (5232).toString();
  

  Concatenating Strings

  String concatenation can be done with the + concatenation operator.

  var foo = "Foo";
  var bar = "Bar";
  var baz = foo + bar;
  
  console.log(baz); // "FooBar"
  

  var string1 = "Hello";
  var string2 = 'World';
  var greet = string1 + " " + string2 + "!";
  
  console.log(greet); // "Hello World!"
  

  Strings can also be concatenated with other variable types.

  var string = "string";
  var number = 32;
  var boolean = true;
  
  console.log(string + number + boolean); // "string32true"
  

  6

  Strings can also be created using template literals (backticks) `hello`.

  var greeting = `Hello`;
  

  With template literals, you can do string interpolation using ${variable} inside template literals:

  var place = `World`;
  var greet = `Hello ${place}!`
  
  console.log(greet); // "Hello World!"
  

  You can use String.raw to get backslashes to be in the string without modification.

  `a\\b` // =  a\b
  String.raw`a\\b` // = a\\b
  

  edited Jul 23 at 1:32

  

  

  

  
• 7

  Reverse String

  edit move example delete share

  7

  function reverseString(str) {
      return str.split('').reverse().join('');
  }
  
  reverseString('string');    // "gnirts"
  

  Explanation

  Section	Explanation	Result
  str	The input string	"string"
  String.prototype.split( deliminator )	Splits string str into an array. The parameter "" means to split between each character.	["s","t","r","i","n","g"]
  Array.prototype.reverse()	Returns the array from the split string with its elements in reverse order.	["g","n","i","r","t","s"]
  Array.prototype.join( deliminator )	Joins the elements in the array together into a string. The "" parameter means an empty deliminator (i.e., the elements of the array are put right next to each other).	"gnirts"

  edited Jul 22 at 18:00

  

  

  
• 2

  Access character at index in string

  edit move example delete share

  2

  Use charAt() to get a character at the specified index in the string.

  var string = "Hello, World!";
  console.log( string.charAt(4) ); // "o"
  

  Alternatively, because strings can be treated like arrays, use the index via bracket notation.

  var string = "Hello, World!";
  console.log( string[4] ); // "o"
  

  To get the character code of the character at a specified index, use charCodeAt().

  var string = "Hello, World!";
  console.log( string.charCodeAt(4) ); // 111
  

  Note that these methods are all getter methods (return a value). Strings in JavaScript are immutable. In other words, none of them can be used to set a character at a position in the string.

  edited 2 days ago

  

  
• 2

  Comparing Strings Lexicographically

  edit move example delete share

  2

  To compare strings alphabetically, use localeCompare(). This returns a negative value if the reference string is lexicographically (alphabetically) before the compared string (the parameter), a positive value if it comes afterwards, and a value of 0 if they are equal.

  var a = "hello";
  var b = "world";
  
  console.log(a.localeCompare(b)); // -1
  

  The > and < operators can also be used to compare strings lexicographically, but they cannot return a value of zero (this can be tested with the == equality operator). As a result, a form of the localeCompare() function can be written like so:

  function strcmp(a, b) {
      if(a === b) {
          return 0;
      } else if (a > b) {
          return 1;
      } else if (a < b) {
          return -1;
      }
  }
  
  console.log(strcmp("hello", "world")); // -1
  console.log(strcmp("hello", "hello")); //  0
  console.log(strcmp("world", "hello")); //  1
  

  This is especially useful when using a sorting function that compares based on the sign of the return value (such as sort).

  var arr = ["bananas", "cranberries", "apples"];
  arr.sort(function(a, b) {
      return a.localeCompare(b);
  });
  console.log(arr); // [ "apples", "bananas", "cranberries" ]
  

  edited Jul 22 at 2:55

  

  

  
• 2

  Escaping quotes

  edit move example delete share

  2

  If your string is enclosed (i.e.) in single quotes you need to escape the inner literal quote with backslash \

  var text = 'L\'albero means tree in Italian';
  console.log( text ); \\ "L'albero means tree in Italian"
  

  Same goes for double quotes:

  var text = "I feel \"high\"";
  

  ---

  Special attention must be given to escaping quotes if you're storing HTML representations within a String, since HTML strings make large use of quotations i.e. in attributes:

  var content = "<p class=\"special\">Hello World!</p>";        // valid String
  var hello   = '<p class="special">I\'d like to say "Hi"</p>'; // valid String
  

  Quotes in HTML strings can also be represented using ' (or ') as a single quote and " ( or ") as double quotes.

  var hi    = "<p class='special'>I'd like to say &quot;Hi&quot;</p>"; // valid String
  var hello = '<p class="special">I&apos;d like to say "Hi"</p>';      // valid String
  

  Note: The use of ' and " will not overwrite double quotes that browsers can automatically place on attribute quotes. For example <p class=special> being made to <p class="special">, using " can lead to <p class=""special""> where \" will be <p class="special">.

  6

  If a string has ' and " you may want to consider using template literals (also known as template strings in previous ES6 editions), which do not require you to escape ' and ".

  var x = `"Escaping " and ' can become very annoying`;
  

  edited 2 hours ago

  

  

  
• 1

  Format string

  edit move example delete share

  1

  if (!String.format) {
      String.format = function (format) {
  
          var args = Array.prototype.slice.call(arguments, 1);
          
          return format.replace(/{(\d+)}/g, function (match, number) {
              return typeof args[number] != 'undefined'
                  ? args[number]
                  : match;
          });
          
      };
  }
  

  Usages :

  String.format('{0} is dead, but {1} is alive!', 'ASP', 'ASP.NET'); // OP : 'ASP is dead, but ASP.NET is alive!'
  

  created Jul 23 at 6:01

  
• 1

  Reverse string using spread operator.

  edit move example delete share

  1

  Note: Spread operator was introduced in ES6.

  Important: This example creates string object from given argument.

  function reverseString(str) {
      return [...String(str)].reverse().join('');    
  }
  
  console.log(reverseString('stackoverflow'));
  console.log(reverseString(1337));
  console.log(reverseString([1, 2, 3]);
  

  Result:

  wolfrevokcats

  7331

  3,2,1

  created Jul 22 at 12:01

  
• 1

  Splitting a string into an array

  edit move example delete share

  1

  Use .split to go from strings to an array of the split substrings:

  var s = "one, two, three, four, five"
  s.split(", ");  // ["one", "two", "three", "four", "five"]
  

  Use the array method .join to go back to a string:

  s.split(", ").join("--");  // "one--two--three--four--five"
  

  created Jul 21 at 20:37

  
• 1

  String Find and Replace Functions

  edit move example delete share

  1

  To search for a string inside a string, there are several functions:

  indexOf( searchString ) and lastIndexOf( searchString )

  indexOf() will return the index of the first occurrence of searchString in the string. If searchString is not found, then -1 is returned.

  var string = "Hello, World!";
  console.log( string.indexOf("o") ); // 4
  console.log( string.indexOf("foo") ); // -1
  

  Similarly, lastIndexOf() will return the index of the last occurrence of searchstring or -1 if not found.

  var string = "Hello, World!";
  console.log( string.lastIndexOf("o") );   // 8
  console.log( string.lastIndexOf("foo") ); // -1
  

  includes( searchString, start )

  includes() will return a boolean that tells whether searchString exists in the string, starting from index start (defaults to 0). This is better than indexOf() if you simply need to test for existence of a substring.

  var string = "Hello, World!";
  console.log( string.includes("Hello") ); // true
  console.log( string.includes("foo") );   // false
  

  replace( regexp|substring, replacement|replaceFunction )

  replace() will return a string that has all occurrences of substrings matching the RegExp regexp or string substring with a string replacement or the returned value of replaceFunction.

  Note that this does not modify the string in place, but returns the string with replacements.

  var string = "Hello, World!";
  string = string.replace( "Hello", "Bye" );
  console.log( string ); // "Bye, World!"
  
  string = string.replace( /W.{3}d/g, "Universe" );
  console.log( string ); // "Bye, Universe!"
  

  replaceFunction can be used for conditional replacements for regular expression objects (i.e., with use with regexp). The parameters are in the following order:

  Parameter	Meaning
  match	the substring that matches the entire regular expressiong
  g1, g2, g3, ...	the matching groups in the regular expression
  offset	the offset of the match in the entire string
  string	the entire string

  Note that all parameters are optional.

  var string = "heLlo, woRlD!";
  string = string.replace( /([a-zA-Z])([a-zA-Z]+)/g, function(match, g1, g2) {
      return g1.toUpperCase() + g2.toLowerCase();
  }); 
  console.log( string ); // "Hello, World!"
  

  created Jul 22 at 14:37

  
• 1

  String Representations of Numbers

  edit move example delete share

  1

  JavaScript has native conversion from Number to it's String representation for any base from 2 to 36.

  The most common representation after decimal (base 10) is hexadecimal (base 16), but the contents of this section work for all bases in the range.

  ---

  In order to convert a Number from decimal (base 10) to it's hexadecimal (base 16) String representation the toString method can be used with radix 16.

  // base 10 Number
  var b10 = 12;
  
  // base 16 String representation
  var b16 = b10.toString(16); // "c"
  

  If the number represented is an integer, the inverse operation for this can be done with parseInt and the radix 16 again

  // base 16 String representation
  var b16 = 'c';
  
  // base 10 Number
  var b10 = parseInt(b16, 16); // 12
  

  To convert an arbitrary number (i.e. non-integer) from it's String representation into a Number, the operation must be split into two parts; the integer part and the fraction part.

  6

  let b16 = '3.243f3e0370cdc';
  // Split into integer and fraction parts
  let [i16, f16] = b16.split('.');
  
  // Calculate base 10 integer part
  let i10 = parseInt(i16, 16); // 3
  
  // Calculate the base 10 fraction part
  let f10 = parseInt(f16, 16) / Math.pow(16, f16.length); // 0.14158999999999988
  
  // Put the base 10 parts together to find the Number
  let b10 = i10 + f10; // 3.14159
  

  Note 1: Be careful as small errors may be in the result due to differences in what is possible to be represented in different bases. It may be desirable to perform some kind of rounding afterwards.
  Note 2: Very long representations of numbers may also result in errors due to the accuracy and maximum values of Numbers of the environment the conversions are happening in.

  edited 2 days ago

  

  
• 1

  Word Counter

  edit move example delete share

  1

  Say you have a <textarea> and you want to retrieve info about the number of:

  • Characters (total)
  • Characters (no spaces)
  • Words
  • Lines

  function wordCount( val ){
      var wom = val.match(/\S+/g);
      return {
          charactersNoSpaces : val.replace(/\s+/g, '').length,
          characters         : val.length,
          words              : wom ? wom.length : 0,
          lines              : val.split(/\r*\n/).length
      };
  }
  
  
  // Use like:
  wordCount( someMultilineText ).words;   // (Number of words)
  

  jsFiddle example

  created Jul 21 at 21:36

  
• 0

  Calculate String Length

  edit move example delete share

  0

  var str = "Hello World";
  var characters = str.length;
  
  console.log( characters ); // 11
  

  created Jul 21 at 21:36

  
• 0

  Detecting a string

  edit move example delete share

  0

  To detect whether a parameter is a string, use typeof:

  var aString = "my string";
  var anInt = 5;
  var anObj = {};
  typeof aString === "string";   // true
  typeof anInt === "string";     // false
  typeof anObj === "string";     // false
  

  NOTE: If you ever have a String object, via new String("somestr"), then this will not work:

  var aStringObj = new String("my string");
  typeof aStringObj === "string";    // false
  

  created Jul 21 at 20:37

  
• 0

  Find the index of a substring inside a string

  edit move example delete share

  0

  The .indexOf method returns the index of a substring inside another string (if exists, or -1 if otherwise)

  'Hellow World'.indexOf('Wor');    // 7
  

  .indexOf also accepts an additional numeric argument that indicates on what index should the function start looking

  "harr dee harr dee harr".indexOf("dee", 10); // 14
  

  You should note that .indexOf is case sensitive

   'Hellow World'.indexOf('WOR');    // -1
  

  created Jul 23 at 7:29

  
• 0

  Get String Length

  edit move example delete share

  0

  var string = 'qwerty'
  string.length // 6
  

  created Jul 21 at 21:35

  
• 0

  Replace whitespaces in a string

  edit move example delete share

  0

  You can replace the whitespaces in a string using the .replace method and supplying it with a pattern that matches all white spaces

  "get ready for trouble".replace(/\s/g, "_");
  // "get_ready_for_trouble"
  

  Another method is to combine .split and .join, split will accept a pattern and a string

  "and make it double".split(/\s/g).join('_')
  "and_make_it_double"
  "and make it double".split(' ').join('_')
  "and_make_it_double"
  

  created 15 hours ago

  
• 0

  Reverse string without using the reverse function

  edit move example delete share

  0

  function reverse(string) {
      var strRev = "";
      for (var i = string.length - 1; i >= 0; i--) {
          strRev += string[i];
      }
      return strRev; 
  }
  
  reverse("zebra");
  

  Returns

  "arbez";
  

  created 15 hours ago

  
• 0

  String to Capitalized

  edit move example delete share

  0

  Capitalize only first letter of a sentence

  The JavaScript specification doesn't provide a prototype function to capitalize strings. So we'll have to write our own.

  var capitalize = function (string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
  };  
  

  Capitalize the first letter of each word of a sentence

  The above function naively capitalizes only the first letter of a given string. Maybe we would like to capitalize each word in a sentence. We'll reuse our existing function.

  var capitalizeEach = function (string) {
      return string.split(" ").map(capitalize).join(" ");
  };
  

  created yesterday

  
• 0

  String to Lower Case

  edit move example delete share

  0

  String.prototype.toLowerCase()

  console.log('QWERTY'.toLowerCase()); // 'qwerty'
  

  created Jul 21 at 21:35

  
• 0

  String to Upper Case

  edit move example delete share

  0

  String.prototype.toUpperCase():

  console.log('qwerty'.toUpperCase()); // 'QWERTY'
  

  Without Using toUpperCase

  function upcase(string) {
      var uppercase = "";
      for (var i = 0; i < string.length; i++) {
          uppercase += String.fromCharCode(string[i].charCodeAt(0) - 32);
      }
      return uppercase;
  }
  
  console.log(upcase("qwerty"));      // QWERTY
  

  • Start with an empty string that will represent the uppercase version of your original
  • Iterate over every character in the string with a for loop. Let's take the first character for example
  • q.charCodeAt(0) // 113
  • Subtract 32 to get the uppercase version // 81
  • Find the character corresponding to a number with String.fromCharCode

  https://jsfiddle.net/kuseu281/

  edited 15 hours ago

  

  
• 0

  Strings are unicode

  edit move example delete share

  0

  All JavaScript strings are unicode!

  var s = "some ∆≈ƒ unicode ¡™£¢¢¢";
  s.charCodeAt(5);  // 8710
  

  There are no raw byte or binary strings in JavaScript. To effectively handle binary data, use Typed Arrays.

  created Jul 21 at 20:37

  
• 0

  Substrings with slice

  edit move example delete share

  0

  Use .slice() to extract substrings given two indices:

  var s = "0123456789abcdefg";
  s.slice(0, 5);  // "01234"
  s.slice(5, 6);  // "5"
  

  Given one index, it will take from that index to the end of the string:

  s.slice(10);    // "abcdefg"
  

  created Jul 21 at 20:37

  
• 0

  Trim whitespace

  edit move example delete share

  0

  To trim whitespace from the edges of a string, use String.prototype.trim:

  "    some whitespaced string  ".trim();  // "some whitespaced string"
  

  Many JavaScript engines, but not Internet Explorer, have implemented non-standard trimLeft and trimRight methods. There is a proposal, currently at Stage 1 of the process, for standardised trimStart and trimEnd methods, aliased to trimLeft and trimRight for compatibility.

  // Stage 1 proposal
  "    this is me    ".trimStart();  // "this is me    "
  "    this is me    ".trimEnd();  // "    this is me"
  
  // Non-standard methods, but currently implemented by most engines
  "    this is me    ".trimLeft();  // "this is me    "
  "    this is me    ".trimRight();  // "    this is me"
  

  edited Jul 23 at 20:13