Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you about how to use String Pad in JavaScript. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Filling is very easy! Just enter the string and length you want. It populates the string until the length is reached. Use padStart to apply it at the beginning and padEnd to apply it at the end.

Const string = 'hi'; string.padStart (3,' c'); / / "chi" string.padEnd (4,'l'); / / "hill"

Grammar

This is the syntax for how to use this method.

String.padStart (,) string.padEnd ()

Understanding parameters

PadEnd and padStart accept the same parameters.

(1) maxLength

This is the maximum length of the resulting string.

Const result = string.padStart (5); result.length; / / 5

When I learned this, it took me a while, and I always thought it was the number of times I repeatedly populated the string parameter. So I just want to emphasize that this parameter sets the MAX or target length of the result string. This is not the number of times the fill string is repeated. But you're smarter than me, so I'm sure you're not confused.

(2) padString

This is the string you want to fill in the string. This is optional. If you do not specify anything, the default value is blank.

'hi'.padStart (5); / / equivalent to 'hi'.padStart (5,'')

Also, if you try to pass an empty string, padding will not occur.

Const result = 'hi'.padStart (5,' hi'); result; / /''result.length; / / 2

How does it handle other data types

For the second parameter, padString, it accepts a string. If you try to pass any other data type, it will use toString to force it to a string and will use that string. So let's see what happens when you use toString on different value types.

/ / NUMBER (100) .toString (); / / '100' / / BOOLEAN true.toString (); / /' true' false.toString (); / / 'false' / / ARRAY [' A'] .toString (); / /'A'[''] .toString (); / /'/ / OBJECT ({}) .toString (); / /'[object Object]'({hi: 'hi'}). ToString () / /'[object Object]'

Now that we know, let's see if these other value types are passed to padStart (padEnd will have the same behavior).

'SAM'.padStart (8,100); / /' 10010SAM 'SAM'.padStart (8, true); / /' truetSAM' 'SAM'.padStart (8, false); / /' falseSAM' 'SAM'.padStart (5, [']); / / 'SAM'' SAM'.padStart (5, ['hi']); / /' hiSAM' 'SAM'.padStart (18, {}) / /'[object Object] SAM' 'SAM'.padStart (18, {hi:' hi'}); / /'[object Object] SAM'

Dealing with undefined

But here's an interesting question. When you try to cast undefined, you get a TypeError.

Undefined.toString (); / / TypeError: Cannot read property 'toString' of undefined

However, when you pass in undefined as the second parameter, you get the following result:

'SAM'.padStart (10, undefined); / / 'SAM'

So when I said that the padString parameter would be cast with toString, did I lie to you? all right, let's take a closer look at the specification.

All right, let me update my speech! Unless it is undefined, all other data types you pass will be cast using toString.

What if padString exceeds maxLength?

When the first parameter maxLength does not allow your first parameter padString to have sufficient length, it will be ignored directly.

'hi'.padEnd (2, 'SAM'); / /' hi'

Or it will be cut off. Remember, maxLength represents the maximum length your padString can occupy minus the length of the string.

'hi'.padEnd (7, 'SAMANTHA'); / /' hiSAMAN'

Also, if your first parameter maxLength is less than your string, it will only return that string.

'hello'.padEnd (1,' SAM'); / / 'hello'

In the previous code notes, I introduced String Trim, which mentioned that the trim method has an alias.

TrimLeft is an alias for trimStart

TrimRight is an alias for trimEnd

However, for string padding methods, there is no alias. So don't use padLeft and padRight, they don't exist. This is why you are encouraged not to use trim aliases for better consistency in your code base.

Use case

(1) use padEnd for table formatting

A good use case for string padding is formatting. I showed you how to display strings in tabular format.

(2) right-align strings with padStart

You can use padStart formatting right alignment.

Console.log ('JavaScript'.padStart (15)); console.log (' HTML'.padStart (15)); console.log ('CSS'.padStart (15)); console.log (' Vue'.padStart (15))

This will output:

JavaScript HTML CSS Vue

(3) receipt format

With knowledge of the correct alignment format, you can print receipts like this:

Const purchase = [['Masks',' 9.99'], ['Shirt',' 20.00'], ['Jacket',' 200.00'], ['Gloves',' 10.00'],]; purchase.forEach (([item, price])) = > {return console.log (item + price.padStart (20-item.length));})

This will output:

Masks 9.99 Shirt 20.00 Jacket 200.00 Gloves 10.00

(4) concealment of figures

We can also use it to display masked numbers.

Const bankNumber = '2222 2222 2222; const last4Digits = bankNumber.slice (- 4); last4Digits. (bankNumber.length,' *'); / / * 2222

Browser support

PadStart and padEnd are launched at the same time, so they share similar browser support. All browsers except IE support it, but are we really surprised?

Polyfill

The above is the editor for you to share how to use String Pad in JavaScript, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.