Javascript input text to number

How to convert a string to a number in html? and how to pass a variable into scriptlet code?

How can I convert a string into a number in HTML? I wanted to convert an input value into a number and pass it into the script code. Pressing the button should do this conversion and pass the variable.

Enter a number:   function getInput(x)  %>
  
Number
 

Where X comes from? Don’t forget your loop is executed server side while input happens client-side.

you need to make an ajax request to a servlet to send data to server. Else make a form submit to send the data to servlet and use requestDispatcher to redirect to same page with populated table.

Of course, for every confirmed change (click on button) just post an AJAX request. Server will render required table and client will replace old HTML with new one (received from server). If you just need to render table of your example you may even do everything client-side.

2 Answers 2

For converting the string to number:

If you’ve noticed, I’ve removed number.value from getInput() , as number.value will not return you the input element value.

pass it into the scriptlet code.

This is not possible. As the scriplet has been compiled in the server and sent to the client. You can’t assign value back to scriplet. Else You need to make an ajax request to a servlet to send data to server. Else make a form submit to send the data to servlet and use requestDispatcher to redirect to same page with populated table.

There is no link between variables set in JavaScript and those set in Java scriptlet code in a JSP (well there can be but not in the way you are trying). If you want to use scriptlet code to display your table rows based on the number entered, you will have to add a form and post it back to the page. You would also need to add a name value to your text field. Then you would use request.getParameter(«name of the text field») to get the value they entered and replace **X** with that value. You probably also want to make the changes that @mohamedrias proposes.

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

How to Convert a String to a Number in JavaScript

There are many ways to convert a string into a number using JavaScript. But what does that look like in code?

In this article, I will show you 11 ways to convert a string into a number.

Here’s an Interactive Scrim of How to Convert a String to a Number in JavaScript:

How to convert a string to a number in JavaScript using the Number() function

One way to convert a string into a number would be to use the Number() function.

In this example, we have a string called quantity with the value of «12» .

If we used the typeof operator on quantity , then it will return the type of string.

console.log(typeof quantity);

We can convert quantity into a number using the Number function like this:

We can check that it is now a number by using the typeof operator again.

console.log(typeof Number(quantity));

If you tried to pass in a value that cannot be converted into a number, then the return value would be NaN (Not a Number).

How to convert a string to a number in JavaScript using the parseInt() function

Another way to convert a string into a number is to use the parseInt() function. This function takes in a string and an optional radix.

A radix is a number between 2 and 36 which represents the base in a numeral system. For example, a radix of 2 would represent the binary system, while a radix of 10 represents the decimal system.

We can use the quantity variable from earlier to convert that string into a number.

const quantity = "12"; console.log(parseInt(quantity, 10));

What happens if I try to change the quantity variable to «12.99» ? Will the result using parseInt() be the number 12.99?

const quantity = "12.99"; console.log(parseInt(quantity, 10));

As you can see, the result is a rounded integer. If you wanted to return a floating point number, then you would need to use parseFloat() .

How to convert a string to a number in JavaScript using the parseFloat() function

The parseFloat() function will take in a value and return a floating point number. Examples of floating point numbers would be 12.99 or 3.14.

If we modify our example from earlier to use parseFloat() , then the result would be the floating point number of 12.99.

const quantity = "12.99"; console.log(parseFloat(quantity));

If you have leading or trailing whitespace in your string, then parseFloat() will still convert that string into a floating point number.

const quantity = " 12.99 "; console.log(parseFloat(quantity));

If the first character in your string cannot be converted into number, then parseFloat() will return NaN .

const quantity = "F12.99"; console.log(parseFloat(quantity));

How to convert a string to a number in JavaScript using the unary plus operator ( + )

The unary plus operator ( + ) will convert a string into a number. The operator will go before the operand.

const quantity = "12"; console.log(+quantity);

We can also use the unary plus operator ( + ) to convert a string into a floating point number.

const quantity = "12.99"; console.log(+quantity);

If the string value cannot be converted into a number then the result will be NaN .

const quantity = "awesome"; console.log(+quantity);

How to convert a string to a number in JavaScript by multiplying the string by the number 1

Another way to convert a string into a number is to use a basic math operation. You can multiply the string value by 1 and it will return a number.

const quantity = "12"; console.log(quantity * 1);

As you can see, when we multiply the quantity value by 1, then it returns the number 12. But how does this work?

In this example, JavaScript is converting our string value to a number and then performing that mathematical operation. If the string cannot be converted to a number, then the mathematical operation will not work and it will return NaN .

const quantity = "awesome"; console.log(quantity * 1);

This method will also work for floating point numbers.

const quantity = "10.5"; console.log(quantity * 1);

How to convert a string to a number in JavaScript by dividing the string by the number 1

Instead of multiplying by 1, you can also divide the string by 1. JavaScript is converting our string value to a number and then performing that mathematical operation.

const quantity = "10.5"; console.log(quantity / 1);

How to convert a string to a number in JavaScript by subtracting the number 0 from the string

Another method would be to subtract 0 from the string. Like before, JavaScript is converting our string value to a number and then performing that mathematical operation.

const quantity = "19"; console.log(quantity - 0);

How to convert a string to a number in JavaScript using the bitwise NOT operator ( ~ )

The bitwise NOT operator ( ~ ) will invert the bits of an operand and convert that value to a 32-bit signed integer. A 32-bit signed integer is a value that represents an integer in 32 bits (or 4 bytes).

If we use one bitwise NOT operator ( ~ ) on a number, then it will perform this operation: -(x + 1)

But if we use two bitwise NOT operators ( ~ ), then it will convert our string to a number.

const quantity = "19"; console.log(~~quantity);

This method will not work for floating point numbers because the result would be an integer.

const quantity = "19.99"; console.log(~~quantity);

If you tried to use this method on non-numeric characters, then the result would be zero.

const quantity = "awesome"; console.log(~~quantity);

This method does have its limitations because it will start to break for values that are considered too large. It is important to make sure that your number is between the values of a signed 32 bit integer.

const quantity = "2700000000"; console.log(~~quantity);

To learn more about the bitwise NOT operator ( ~ ) , please read up in the documentation.

How to convert a string to a number in JavaScript using the Math.floor() function

Another way to convert a string to a number is to use the Math.floor() function. This function will round the number down to the nearest integer.

const quantity = "13.4"; console.log(Math.floor(quantity));

Just like in earlier examples, if we tried to use non-numeric characters, then the result would be NaN .

const quantity = "awesome"; console.log(Math.floor(quantity));

How to convert a string to a number in JavaScript using the Math.ceil() function

The Math.ceil() function will round a number up to the nearest integer.

const quantity = "7.18"; console.log(Math.ceil(quantity));

How to convert a string to a number in JavaScript using the Math.round() function

The Math.round() function will round the number to the nearest integer.

If I have the value of 6.3, then Math.round() will return 6.

const quantity = "6.3"; console.log(Math.round(quantity));

But if I changed that value to 6.5, then Math.round() will return 7.

const quantity = "6.5"; console.log(Math.round(quantity));

Conclusion

In this article, I showed you 11 ways to convert a string to a number using JavaScript.

Here are the 11 different methods discussed in the article.

1. using the Number() function
2. using the parseInt() function
3. using the parseFloat() function
4. using the unary plus operator ( + )
5. multiplying the string by the number 1
6. dividing the string by the number 1
7. subtracting the number 0 from the string
8. using the bitwise NOT operator ( ~ )
9. using the Math.floor() function
10. using the Math.ceil() function
11. using the Math.round() function

I hope you enjoyed this article and best of luck on your JavaScript journey.

Источник

7 ways to convert a String to Number in JavaScript

parseInt() parses a string and returns a whole number. Spaces are allowed. Only the first number is returned.
This method has a limitation though. If you parse the decimal number, it will be rounded off to the nearest integer value and that value is converted to string. One might need to use parseFloat() method for literal conversion.

myString = '129' console.log(parseInt(myString)) // expected result: 129 a = 12.22 console.log(parseInt(a)) // expected result: 12 

2. Using Number()

Number() can be used to convert JavaScript variables to numbers. We can use it to convert the string too number.
If the value cannot be converted to a number, NaN is returned.

Number("10"); // returns 10 Number(" 10 "); // returns 10 Number("10.33"); // returns 10.33 

3. Using Unary Operator (+)

The unary plus operator ( + ) precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn’t already.

const x = 25; const y = -25; console.log(+x); // expected output: 25 console.log(+y); // expected output: -25 console.log(+''); // expected output: 0 

4. Using parseFloat()

parseFloat() parses a string and returns a number. Spaces are allowed. Only the first number is returned.

parseFloat("10"); // returns 10 parseFloat("10.33"); // returns 10.33 parseFloat("10 20 30"); // returns 10 parseFloat("10 years"); // returns 10 parseFloat("years 10"); // returns NaN 

5. Using Math.floor()

The Math.floor() function returns the largest integer less than or equal to a given number. This can be little tricky with decimal numbers since it will return the value of the nearest integer as Number.

str = '1222' console.log(Math.floor(str)) // returns 1222 a = 12.22 Math.floor(a) // expected result: 12 

6. Multiply with number

Multiplying the string value with the 1 which won’t change the value and also it will be converted to number by default.

str = '2344' console.log(str * 1) // expected result: 2344 

7. Double tilde (~~) Operator

str = '1234' console.log(~~str) // expected result: 1234 negStr = '-234' console.log(~~negStr) // expected result: -234 

Here is the comparison of the ways mentioned performance wise. Comment below if you know more methods.
Thank You

Top comments (17)

The double tilde method is actually something I never thought about, but is worth explaining.

The double tilde «operator» is not as much as an operator as it’s a double bitwise negation.

Let’s cast ’64’ to 64 using this method, so we do ~~’64’ . First we will evaluate ~’64’ . As bitwise operations work on binary, ’64’ is cast to a number. So ~64 .

64 in binary is 01000000 . ~ will negate all the bits so it becomes 10111111 , which is -65 since numbers in JavaScript are signed. Now we negate it again, which becomes 01000000 , which is 64 in decimal.

I previously stated that 10111111 is -63 , which is incorrect. It’s actually -65 . Sorry about that.

14 likes Like Comment button

Источник