Four practical tips for JavaScript string operations

Preface

Strings are one of the most basic and important data types in the programming world, and JavaScript is no exception. JavaScript strings are immutable and are convenient for storing text that can consist of characters, numbers, and Unicode. JavaScript provides many built-in functions that allow strings to be created and manipulated in different ways. In this article, I will share some tips for manipulating JavaScript strings elegantly.

1. Split a string

The split() method in JavaScript splits a String object into an array of substrings using a specified separator string, with a specified split string to determine the position of each split. With two optional parameters (delimiter and optional limit count) the string is converted into an array of characters or substrings. Not setting a delimiter will return the complete string in an array. The delimiter can be a single character, a string, or even a regular expression. Here is the code that will split the string using commas and spaces using regular expressions:

const title = "4 JavaScript string tricks";
console.log(title.split(/[\s+，/]+/)); // ['4', 'JavaScript', 'String Skills']
console.log(title.split(/[\s+，/]+/, 2)); // [ '4', 'JavaScript' ]

Strings split by the split() function can be joined together simply by using join("").

2. JSON formatting and parsing

JSON is not a JavaScript-only data type and is widely used for front-end and back-end data interaction. The JSON.stringify() function is used to convert an object into a string in JSON format. Normally, you just pass the object as a parameter, like this:

const article = {
    title: "JavaScript String Skills",
    view: 30000,
    comments: null,
    content: undefined,
};
const strArticle = JSON.stringify(article); 

console.log(strArticle); // {"title":"JavaScript String Skills","view":30000,"comments":null}

As you can see from the code above, undefined values ​​are filtered out in stringify, but null values ​​are not.

JSON.stringify() can accept two optional parameters, the second one is a replacer where you can specify an array of keys to print or a function to clear them. The following code:

console.log(JSON.stringify(article, ["title", "comments"])); // {"title":"JavaScript String Techniques","comments":null}
console.log(JSON.stringify(article, [])); // {}

For a huge JSON, passing a long array may affect readability and efficiency. Therefore, you can set a replacement function and return undefined for the keys you want to skip, as follows:

const result = JSON.stringify(article, (key, value) =>
    key === "title" ? undefined : value
);
console.log(result); // {"view":30000,"comments":null}

The third argument to JSON.stringify() formats the JSON by specifying indentation (useful in nested blocks). You can pass a number to set the indent spacing, or even a string to replace spaces with. The following code:

console.log(JSON.stringify(article, ["title"], "\t")); 

The output is in the following format:

{
"title": "JavaScript String Tricks"
}

There is also a JSON.parse() function that takes a JSON string and converts it into a JavaScript object. It also accepts a reviver function that can intercept object properties and modify the property values ​​before returning the value.

const reviver = (key, value) => (key === "view" ? 0 : value);

var jsonString = JSON.stringify(article);
var jsonObj = JSON.parse(jsonString, reviver);

console.log(jsonObj); // { title: 'JavaScript String Techniques', view: 0, comments: null }

3. Multiline strings and embedded expressions

There are three ways to create strings in JavaScript, using single quotes '', double quotes "" or backticks (the top left of the keyboard, to the left of 1).

const countries1 = "China";
const countries2 = "China";
const countries3 = `China`;

The first two are created in essentially the same way, and can be mixed and matched to concatenate or add quoted strings (by using the opposite syntax style), while backticks allow for fancy and powerful manipulations of strings.

Backticks are also called template literals. Backticks are handy for creating multi-line strings and embedding expressions. Here is how to create a multi-line string using string interpolation in JavaScript:

const year = "2021";
const month = 7;
const day = 2;
const detail = `Today is ${year}${month}${day},
It's a good day! `;

console.log(detail);

The output results are also wrapped, as follows:

Today is July 2, 2021.
It's a good day!

In addition to string literals, any valid expression is allowed inside ${}, which can be a function call or expression, even a nested template.
Tagged templates are an advanced form of template literals that allow the template literal to be parsed using a function with embedded expressions as arguments. The following code:

const title = "JavaScript String Tips";
const view = 30000;

const detail = (text, titleExp, viewExp) => {
    const [string1, string2, string3] = [...text];
    return `${string1}${titleExp}${string2}${viewExp}${string3}`;
};

const intro = detail`The title of this article is "${title}", and the current reading volume is: ${view}`;

console.log(intro); // The title of the article is "JavaScript String Skills", and the current reading volume is: 30000

4. Verify if a substring exists in a string array

Finding if a substring exists in a JavaScript string is easy in ES6. Just use the includes function.

But you need to verify whether the string exists in the data. If one of the items in the main array contains it, it returns true. If neither of them contains it, it returns false. Therefore, you need to use the some function together with includes, as shown in the following code:

const arrayTitles = ["Javascript", "EScript", "Golang"];
const hasText = (array, findText) =>
    array.some((item) => item.includes(findText));

console.log(hasText(arrayTitles, "script")); // true
console.log(hasText(arrayTitles, "php")); // false

Summarize

JavaScript string operations are common operations in projects. The above 4 tips are worth learning and applying to actual development.

This concludes this article on four practical tips for JavaScript string manipulation. For more relevant JS string manipulation tips, please search for previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!