javaScript Strings must know methods and more.

A javaScript String is one of the primitive values that there are to work with when making a project with javaScript. A string is a collection of characters that compose a text pattern, and as such can serve a number of functions beyond just simply displaying text. In this post I will be covering some of the must know String prototype methods, as well as some general quirks to look out for when working with a String in javaScript.

1 - JavaScript string basics - creating strings

The basics of strings in JavaScript might include how to go about creating, and displaying Strings. There are a number of ways to create a string in javaScript the most basic and common way, and then there are some not so basic and common ways as well. In this section I will be going over the different ways I know how to go about creating a string with javaScript.

1.1 - Creating a string with quotes

The most common and basic way to go about creating a string in javaScript would be to use quotes.

1
2
3
4
5
let str = 'foobar';
console.log(typeof str); // string
console.log(str.constructor.name); // String
console.log(str); // 'foobar'

Single or double quotes can be used.

1.2 - backticks

There are also backticks that can be used as well. These can be used in the same way as quotes, but also allow for things like function calls.

1
2
3
4
5
6
let getN = () => {
return 17;
};
let str = `n=${getN()}`;
console.log(str); // 'n=17'

1.3 - The result of an expression

Strings can often end up being the result of an expression with one or more operators. This can sometimes be an unintended result when respecting a number. When adding two strings together the result is another string, and when adding a string and a number together the result is also a string. Sometimes a method or property will supply a string where a number might be expected resulting in string concatenation where addition was expected.

1
2
3
4
5
let str = 7 + '2';
console.log(str); // '72'
let n = 7 + Number('2');
console.log(n); // 9

2 - String length

To get the character length of a string there is the length property of a string. Also strings can be worked with as if they are array like objects as well. When this is the case the character length of the string can also be though of as the corresponding array length as well. So in this post I will be showing some examples of how to convert a string to an array and vice versa as well.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let str = 'foobar';
console.log(str.length); // 6
let arr = str.split('');
console.log(arr.constructor.name); // Array
console.log(arr); // [ 'f', 'o', 'o', 'b', 'a', 'r' ]
console.log(arr.length); // 6
let str2 = arr.join('');
console.log(str2.constructor.name); // String
console.log(str2); // 'foobar'

3 - Getting or setting a character

To get a character of a given index value from the left to the right of the string, one way is to do so the same way as if it where an array. There is also a Sting.charAt method as well in addition to a number of other ways.

1
2
3
4
5
6
7
8
let str= '1234-test-4321';
console.log(str[5]); // 't'
console.log(str.charAt(5)); // 't'
str = str.slice(0,5) + 'b' + str.slice(6,str.length-1)
console.log(str); // '1234-best-4321'

Setting a char might prove to be a bit more complicated and may involve concatenation and the use of the String.slice prototype method.

4 - Converting an array to a string and back

There is the process of converting an array to a string and doing the inverse of that as well. Typically this is doe with the Arry.join method. With Array.join just call the prototype method off of the array instance and pass a string that will be the string that will be placed between each element in the array, this can be an empty string if nothing is desired to be between elements

1
2
3
4
5
6
7
8
9
10
let arr =[1,2,3,4],
str = arr.join('');
console.log(str); // '1234';
console.log(typeof str); // string
let b = str.split('');
console.log(b); // [1,2,3,4]
console.log(b.constructor.name); // Array

To convert a string back to an array there is the String.split method. The argument that is given to the String.split method is what is to be used as an indicator as to where the various points in a string are to be split into elements in an array. This value as well can be an empty string which will result in each character being a single element in the array.

5 - String.trim

The trim String prorotype method can be used to remove any additional while space that may be at the beginning or end of a string.

1
2
3
4
5
6
var str = ' this string has extra white space ';
console.log(str.length); // 42
str = str.trim();
console.log(str.length); // 33
console.log(str);

6 - String.match

If you are not familiar with regular expressions, it might be a good idea to look into them more at some point. Every now and then they do come in handy when it comes to doing anything complex with pattern detection with strings.

1
2
3
4
5
var str = '<div><p>foo<\/p><\/div><div><span>bar<\/span><\/div>';
var m = str.match(/<div>(.*?)<\/div>/g);
console.log(m[1]); // <div><span>bar</span></div>

7 - String.replace

The String.replace prototype method is another very helpful and powerful method that can be used for advanced search and replace operations using regular expressions. The first argument is the regular expression and the second argument is what the pattern is to be replace with when found.

1
2
3
4
5
var str = '<div><p>foo<\/p><\/div><div><span>bar<\/span><\/div>';
var r = str.replace(/<p>(.*?)<\/p>/g,'');
console.log(r); // <div></div><div><span>bar</span></div>