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. They can be single or double quotes in mode cases, but some times one or the other must be used, such is the case with JavaScript Object Notation.

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

This can be thought of as a string literal when the value of the string exists in the actual hard coded javaScript itself. In most real projects a string is a type of value that is obtained from and input element, or from a parsed object from JSON data that was pulled in via an http request. So there are many other ways to go about getting, or creating a string so lets look as some more examples.

1.2 - Making a javaScript string with 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

1.4 - From an Array

One way to create a string from an array is ti use the Array.join method. This is one of the many Array prototype methods that can be used to join all elements together and return a string when dealing with an array of strings.

1
2
3
let arr = ['f', 'o', 'o', 'b', 'a', 'r'],
str = arr.join('');
console.log(str); // 'foobar'

In addition to the Array.join method there is also the String.split method that can do the revers of this spiting a string into an array of strings.

1.5 - Creating a javaScript string from an object

There are a number of ways to create a string from an Object in general. There are many native methods to work with such as Object.keys, Array.map, and so forth. There is also for in loops and the JSON.stringify method that come to mind also just to name a few options.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let obj = {
intro: 'Hello, ',
mess: 'This is Dustin. ',
end: 'Have a nice day'
};
// Object.keys, Array.map, and Array.join
let str = Object.keys(obj).map((key) => {
return obj[key];
}).join('');
console.log(str);
// 'Hello, This is Dustin. Have a nice day'
// for in
let str2 = '';
for (let prop in obj) {
str2 += obj[prop];
}
console.log(str2);
// 'Hello, This is Dustin. Have a nice day'
console.log(JSON.stringify(obj));
// {"intro":"Hello, ","mess":"This is Dustin. ","end":"Have a nice day"}

1.6 - Getting a string from an input tag in client side javaScript

So then there are input text tags in client side javaScript. In order to do this full justice I will need to get into the various event handers that can be attached to an input element, as well as the event objects that are passed to the callbacks that fire when and event happens. Getting into this in depth will be a bit of subject for the tone of this post, so I will just be going over a simple little example here.

The target property of an event object is a reference to the element in which the event has occurred. Once that value has been obtained there is the value property of an input element. The value property is of course the current value of the input tag, and in the case of input tags the value is a javaScript string.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<title>javaScript string from input element</title>
</head>
<body>
<input type="text">
<div id="out"></div>
<script>
// get references to elements
var input = document.getElementsByTagName('input')[0],
out = document.getElementById('out');
// attach event
input.addEventListener('keyup', function(e){
var str = e.target.value;
console.log(typeof str); // 'string'
// do something with it
out.innerText = str.split('').map(function(ch){
return ch.charCodeAt(0);
}).join(':');
});
</script>
</body>
</html>

In many projects this is often the typical way of going about getting a string that is the result of user input. It is genraly a better idea to use input tags rather that using prompt.

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 prototype 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 pattern matching

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 for pattern matching and replacement

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>