Home Web Front-end JS Tutorial javascript type conversion.

javascript type conversion.

Oct 12, 2016 am 11:37 AM

Directory:
1: Pseudo object
2: Convert to string
3: Convert number to string
4: Convert to number
5: Convert to Boolean
6: The difference between Number() and parseInt()
7: String The difference between () and toString()

1: Pseudo-object
Pseudo-object: JavaScript is a very interesting language. Even basic types are pseudo-objects, so they all have properties and methods.
The type of variable a is a string, and its length can be obtained by calling its property length, which is a pseudo object.

<script><br/> var a="hello javascript"; <br/> document.write("变量a的类型是:"+(typeof a));<br/> document.write("<br>");<br/> document.write("变量a的长度是:"+a.length);<br/></script>

Operation effect:
The type of variable a is: string
The length of variable a is: 16

2: Convert to string
Whether it is Number, Boolean or String, there is a toString method for converting to String

<script><br/> var a=10; <br/> document.write("数字 "+a+" 转换为字符串"+a.toString());<br/> document.write("<br>");<br/><br/> var b=true; <br/> document.write("布尔 "+b+" 转换为字符串"+b.toString());<br/> document.write("<br>");<br/><br/> var c="hello javascript"; <br/> document.write("字符串 "+c+" 转换为字符串 "+c.toString());<br/> document.write("<br>");<br/><br/></script>

Operation effect:
Number 10 is converted to string 10
Boolean true is converted to string true
String hello javascript is converted to string hello javascript

3: Number to string
Number is converted to character When stringing, there are two types: default mode and base mode
<script><br/> var a=10; <br/> document.write(&#39;默认模式下,数字10转换为十进制的&#39;+a.toString()); //默认模式,即十进制<br/> document.write("<br>"); <br/><br/> document.write(&#39;基模式下,数字10转换为二进制的&#39;+a.toString(2)); //基模式,二进制<br/> document.write("<br>"); <br/> <br/> document.write(&#39;基模式下,数字10转换为八进制的&#39;+a.toString(8)); //基模式,八进制<br/> document.write("<br>"); <br/><br/> document.write(&#39;基模式下,数字10转换为十六进制的&#39;+a.toString(16)); //基模式,十六进制<br/> document.write("<br>"); <br/><br/></script>
Operating effect:
In default mode, the number 10 is converted to decimal 10
In base mode, the number 10 is converted to binary 1010
In base mode, the number 10 is converted to In the octal 12
base mode, the number 10 is converted to hexadecimal a

4: converted to a number
Javascript provides built-in functions parseInt() and parseFloat() respectively to convert to a number

Note: If it is converted A string is composed of numbers and characters at the same time, so parseInt will keep positioning numbers until non-characters appear. So "10abc" will be converted to 10

Question: What will the string "10abc8" be converted to?

<script><br/> document.write("字符串的\"10\"转换为数字的:"+parseInt("10")); //转换整数<br/> document.write("<br>");<br/> document.write("字符串的\"3.14\"转换为数字的:"+parseFloat("444 3.14"));//转换浮点数<br/> document.write("<br>");<br/> document.write("字符串的\"10abc\"转换为数字的:"+parseInt("10abc")); //判断每一位,直到发现不是数字的那一位<br/> document.write("<br>");<br/><br/> document.write("字符串的\"hello javascript\"转换为数字的:"+parseInt("h5555ello javascript")); //如果完全不包含数字,则返<br/><br/>回NaN - Not a Number<br/> document.write("<br>");<br/><br/></script>
Operation effect:
The string "10" is converted to a number: 10
The string "3.14" is converted to a number: 444
The string "10abc" is converted to a number: 10
The string "hello javascript" converted to a number: NaN

5: converted to Boolean
Use the built-in function Boolean() to convert to a Boolean value
When converting a string:
Non-empty means true
When converting a number:
Not 0 That is true
When converting the object:
Non-null is true

<script><br/> document.write("空字符串&#39;&#39;转换为布尔后的值:"+Boolean("")); //空字符串<br/> document.write("<br>");<br/> document.write("非空字符&#39;hello javascript &#39;串转换为布尔后的值:"+Boolean("hello javascript")); //非空字符串<br/> document.write("<br>");<br/> document.write("数字 0 转换为布尔后的值:"+Boolean(0)); //0<br/> document.write("<br>");<br/> document.write("数字 3.14 转换为布尔后的值:"+Boolean(3.14)); //非0 <br/> document.write("<br>");<br/> document.write("空对象 null 转换为布尔后的值:"+Boolean(null)); //null<br/> document.write("<br>");<br/> document.write("非对象 new Object() 转换为布尔后的值:"+Boolean(new Object())); //对象存在<br/> document.write("<br>");<br/></script>

Operating effect:
The value after converting the empty string '' to Boolean: false
After the non-empty character 'hello javascript ' string is converted to Boolean Value: true
Number 0 Value after conversion to Boolean: false
Number 3.14 Value after conversion to Boolean: true
Empty object null Value after conversion to Boolean: false
Non-object new Object() Conversion to Boolean Value: true

6: The difference between Number() and parseInt()
Number(), like parseInt(), can be used to convert numbers
The difference is that when the converted content contains non-numbers, Number( ) will return NaN (Not a Number)
parseInt() It depends on the situation. If it starts with a number, it will return the legal number part at the beginning. If it starts with a non-number, it will return NaN

<script><br/> document.write("通过Number() 函数转换字符串&#39;123&#39; 后得到的数字:"+Number("123")); //正常的<br/> document.write("<br>");<br/> document.write("通过Number() 函数转换字符串&#39;123abc&#39; 后得到的数字:"+Number("123abc")); //包含非数字<br/> document.write("<br>");<br/> document.write("通过Number() 函数转换字符串&#39;abc123&#39; 后得到的数字:"+Number("abc123")); //包含非数字<br/> document.write("<br>");<br/><br/> document.write("通过parseInt() 函数转换字符串&#39;123&#39; 后得到的数字:"+parseInt("123")); //正常的<br/> document.write("<br>");<br/> document.write("通过parseInt() 函数转换字符串&#39;123abc&#39; 后得到的数字:"+parseInt("123abc")); //包含非数字,返回开头的合法<br/><br/>数字部分<br/> document.write("<br>");<br/> document.write("通过parseInt() 函数转换字符串&#39;abc123&#39; 后得到的数字:"+parseInt("abc123")); //包含非数字,以非数字开头,<br/><br/>返回NaN<br/> document.write("<br>");<br/><br/></script>

Operation effect:
Passed The number obtained after converting the string '123' with the Number() function: 123
The number obtained after converting the string '123abc' with the Number() function: NaN
The number obtained after converting the string 'abc123' with the Number() function : NaN
The number obtained after converting the string '123' through the parseInt() function: 123
The number obtained after converting the string '123abc' through the parseInt() function: 123
Converting the string 'abc123' through the parseInt() function The number obtained after: NaN

7: The difference between String() and toString()
String() and toString() both return strings, the difference lies in the processing of null
String() will return the string "null"
toString() will report an error and cannot be executed

<script><br/> var a = null;<br/> document.write(&#39;String(null) 把空对象转换为字符串:&#39;+String(a)); <br/> document.write("<br>"); <br/> document.write(&#39;null.toString() 就会报错,所以后面的代码不能执行&#39;); <br/> document.write(a.toString()); <br/> document.write("因为第5行报错,所以这一段文字不会显示"); <br/></script>

Operating effect:
String(null) Convert the empty object to a string: null
null.toString() will report an error, so the following code cannot be executed

Learn from yesterday, live for today, hope for tomorrow.


Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1655
14
PHP Tutorial
1252
29
C# Tutorial
1226
24
What should I do if I encounter garbled code printing for front-end thermal paper receipts? What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

Demystifying JavaScript: What It Does and Why It Matters Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

Who gets paid more Python or JavaScript? Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? How to achieve parallax scrolling and element animation effects, like Shiseido's official website? or: How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? Apr 04, 2025 pm 05:36 PM

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

The Evolution of JavaScript: Current Trends and Future Prospects The Evolution of JavaScript: Current Trends and Future Prospects Apr 10, 2025 am 09:33 AM

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

How to merge array elements with the same ID into one object using JavaScript? How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

JavaScript Engines: Comparing Implementations JavaScript Engines: Comparing Implementations Apr 13, 2025 am 12:05 AM

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

How to implement panel drag and drop adjustment function similar to VSCode in front-end development? How to implement panel drag and drop adjustment function similar to VSCode in front-end development? Apr 04, 2025 pm 02:06 PM

Explore the implementation of panel drag and drop adjustment function similar to VSCode in the front-end. In front-end development, how to implement VSCode similar to VSCode...

See all articles