js基础-基本包装类型(Boolean、Number、String )★☆

最新推荐文章于 2024-10-23 16:50:18 发布
原创 最新推荐文章于 2024-10-23 16:50:18 发布 · 463 阅读
· 1
· 0 ·
CC 4.0 BY-SA版权
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
文章标签:

#javascript #基本类型

javascript 专栏收录该内容
74 篇文章
订阅专栏

基本包装类型(Boolean、Number、String)

1、基本包装类型简介

ECMAScript提供了三个基本包装类型:Boolean、Number、String。

实际上,每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而让我们能过调用一些方法来操作这些数据。执行步骤如下:

  • 创建S提让那个类型的一个实例
  • 在实例上调用指定的方法
  • 销毁这个实例
var s1 = new String('test'); 
var s2 = s1.substring(2);
s1 = null;

上面三个步骤也分别适用于Boolean和Number类型对应的布尔值和数字值。

引用类型与基本包装类型的区别在于对象的生存期:使用new操作符创建的引用类型的实例,在执行流离开当前作用域之前都一直保存在内存中,而自动创建的基本包装类型的对象,则只存在于一行代码的执行瞬间,然后立即销毁,这也是我们不能再运行时为基本类型值添加属性和方法的原因。

var s = 'tg'; 
s.age =10;
console.log(s.age); // undefined

上面代码执行输出的是undefined,这是因为第二行创建的String对象在执行第三行代码时已经被销毁了,第三行又创建自己的String对象,而该对象没有age属性。

当然,我们也可以将Boolean、Number和String类型当做工具方法,将任何类型转为布尔值、数值和字符串。

2、 Boolean类型

Boolean类型是与布尔值对应的引用类型。常用于生成布尔值的包装对象的实例。

var bool = new Boolean(true); 

Boolean类型的实例重写了valueOf()方法,返回的基本类型值true或false,重写了toString()方法,返回字符串“true”和“false”。

要注意一点的是,即使你使用false创建一个Boolean实例对象,当进行逻辑运算时,它会被转为true,因为它是一个对象,而所有对象在逻辑运算中都会返回true。

var bool = new Boolean(false); 
if(bool){
console.log(true);
}

// true

对于Boolean类型,我们几乎不用用它来创建实例对象。

3、 Number类型

Number是与数字值对应的引用类型。

创建Number对象:

var num = new Number(); 
var num2 = new Number(10);

Number类型的toString()方法返回数值的字符串,可传递一个表示基数的参数,默认是10进制。

var num = 10; 
console.log(num.toString()); // "10"
console.log(num.toString(2)); // "1010"

3.1 属性

Number类型有以下属性:

Number.POSITIVE_INFINITY:正的无限,指向Infinity。 
Number.NEGATIVE_INFINITY:负的无限,指向-Infinity。
Number.NaN:表示非数值,指向NaN。
Number.MAX_VALUE:表示最大的正数,相应的,最小的负数为-Number.MAX_VALUE。
Number.MIN_VALUE:表示最小的正数(即最接近0的正数,在64位浮点数体系中为5e-324),相应的,最接近0的负数为-Number.MIN_VALUE。
Number.MAX_SAFE_INTEGER:表示能够精确表示的最大整数,即9007199254740991。
Number.MIN_SAFE_INTEGER:表示能够精确表示的最小整数,即-9007199254740991。

3.2 格式化方法

(1)Number.prototype.toFixed()

toFixed()方法会按照指定的小数位来返回数值的字符串表示(四舍五入)。

var num = 10.005; 
console.log(num.toFixed(2)); // "10.01"

注意:如果没有小数位,则以0填补。

var num = 10; 
console.log(num.toFixed(2)); // "10.00"

注意:toFixed()参数的有效范围为0~20个小数位的数值。

(2)Number.prototype.toExponential()

toExponential()方法用于将一个数转为科学计数法形式。

var num = 10; 
console.log(num.toExponential()); //1e+1

toExponential()方法的页可以接受一个参数,参数表示小数点后有效数字的位数,范围为0到20,超出这个范围

var num = 1234; 
console.log(num.toExponential(2)); // 1.23e+3
console.log(num.toExponential(1)); // 1.2e+3

(3)Number.prototype.toPrecision()

toPrecision()方法可能返回固定大小格式,也可能返回指数格式,具体规则是看哪种格式最合适的。它也接收一个参数,表示数值的所有数字的位数(不包含指数部分)

var num = 99; 
console.log(num.toPrecision(1)); // 1e+2
console.log(num.toPrecision(3)); // 99.0

4、 String类型

String类型是字符串的对象包装类型。

创建String对象

var text = new String('tg'); 

String构造函数有一个静态方法:

(1)String.fromCharCode()

fromCharCode()方法的参数是一系列Unicode码点,返回对应的字符串。

var str = String.fromCharCode(104, 101, 108, 108 ,111); 
console.log(str); // "hello"

4.1 String实例对象的属性和方法

4.1.1 属性

length属性

String类型的每个实例都有一个length属性,表示字符串中包含多少个字符(从0开始)。

4.1.2 方法

String类型提供了很多方法:

(1)字符方法

chatAt()接收一个基于0的字符位置的参数, 返回指定位置的字符

var str = 'hello world'; 
console.log(str.charAt(1)); // e

charCodeAt()接收一个基于0的字符位置的参数,返回给定位置字符的Unicode码点(十进制表示)

var str = 'hello world'; 
console.log(str.charCodeAt(1)); // 101

String对象实例是一个类数组对象,所以我们可以使用方括号表示法访问特定字符。

var str = 'hello world'; 
console.log(str[1]); // e

(2)字符串操作方法(字符串API)

concat()用于连接两个字符串,参数可以是一个或多个字符串,返回拼接得到的新字符串

var str1 = 'hello'; 
var str2 = str1.concat(' world');
console.log(str2); // "hello world"
console.log(str1); // "hello"

slice(start,end)用于从原字符串取出子字符串并返回子字符串,不改变原字符串。

第一个参数:表示子字符串的开始位置,如果参数是负值,表示从结尾开始倒数计算的位置,即该负值加上字符串长度

第二个参数:可选,表示子字符串的结束位置(不含该位置);如果参数是负值,表示从结尾开始倒数计算的位置,即该负值加上字符串长度;如果不设置,表示将字符串的长度作为结束位置

var str = 'hello world'; 
console.log(str.slice(1,3)); // "el"
console.log(str.slice(1)); // "ello world"
console.log(str.slice(-1)); // "d"
console.log(str); // "hello world"

注意:如果第一个参数大于第二个参数,则返回空字符串

substring() 用于从原字符串取出子字符串并返回,不改变原字符串,也接收一个或两个参数。

第一个参数表示子字符串的开始位置;

第二个位置表示结束位置,如果不设置,表示将字符串的长度作为结束位置

注意:substring()方法有些不一样,当传入负数时,它会自动将负数转为0,;当第一个参数大于第二个参数时,它会将两个参数的位置对换。

var str = 'hello world'; 
console.log(str.substring(-1,2)); // "he"
console.log(str.substring(3,1)); // "el"

从上面运行结果我们可以看到,substring()自动将-1转为0;将第二行的3和1交换了。

substr()用于从原字符串取出子字符串并返回,不改变原字符串。

第一个参数:表示子字符串的开始位置;

第二个参数:表示子字符串的长度。如果第一个参数是负数,表示倒数计算的字符位置。如果第二个参数是负数,将被自动转为0,因此会返回空字符串;如果不设置,表示将字符串的长度作为结束位置

var str = 'hello world'; 
console.log(str.substr(1,2)); // "el"
console.log(str.substr(-1,2)); // "d"
console.log(str.substr(1,-1)); // ""

(3)字符串位置方法

indexOf()返回给定元素在字符串中第一次出现的位置,如果没有出现则返回-1。第一个参数为要查找的子字符串,可以接受第二个参数,表示搜索的开始位置

var str = 'hello world'; 
console.log(str.indexOf('o')); // 4
console.log(str.indexOf('h',2)); // -1

lastIndexOf()返回给定元素在字符串中最后一次出现的位置,如果没有出现则返回-1。第一个参数为要查找的子字符串,可以接受第二个参数,表示搜索的开始位置

var str = 'hello world'; 
console.log(str.lastIndexOf('o')); // 4
console.log(str.lastIndexOf('h',2)); // 0

(4)trim()

trim() 是ECMAScript 5新增的,用于去除字符串两端的空格,返回一个新字符串,不改变原字符串。

var str = '   hello'; 
console.log(str.trim()); // "hello"

(5)字符串大小写转换

toLowerCase()用于将一个字符串全部转为小写,返回一个新字符串,不改变原字符串。
toUpperCase()将字符串的字符全部转为大写

var str = 'hello'; 
var upper = str.toUpperCase();
var lower = upper.toLowerCase();
console.log(upper); // "HELLO"
console.log(lower); // "hello"

(6)字符串的模式匹配方法

match()用于确定原字符串是否匹配某个子字符串,返回一个数组,成员为匹配的第一个字符串。如果没有找到匹配,则返回null。

search()返回值为匹配的第一个位置。如果没有找到匹配,则返回-1。

replace()用于替换匹配的子字符串,一般情况下只替换第一个匹配(除非使用带有g修饰符的正则表达式)。

split()按照给定规则分割字符串,返回一个由分割出来的子字符串组成的数组。还可传入第二个参数,决定了返回数组的成员数。

(7)localeCompare()方法

localeCompare(s2)用于比较两个字符串。它返回一个整数:

如果小于0,表示第一个字符串小于第二个字符串;

如果等于0,表示两者相等;

如果大于0,表示第一个字符串大于第二个字符串。

console.log('a'.localeCompare('a'));  // 0 
console.log('a'.localeCompare('b')); // -1

注意:比较的是字符串在字母表中的顺序。

确定要放弃本次机会?
福利倒计时
: :

立减 ¥

普通VIP年卡可用
立即使用
front_end_fan
关注 关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
  • 分享
    复制链接
    分享到 QQ
    分享到新浪微博
    扫一扫
  • 举报
    举报
专栏目录
angular:Type number trivially inferred from a number literal, remove type annotation (no-inferrab)
幸遇三杯酒好,况逢一朵花新
05-12 7166
    小咸儿最近在学习Angular的时候遇到了一个问题,再次特地总结下来,分享给大家! [tslint]报错:Type number trivially inferred from a number literal, remove type annotation (no-inferrable-types) 问题主要显示在代码: private ra...
js----基本包装类型
weixin_45116146的博客
08-31 149
按照最新 ES 标准定义,基本数据类型(primitive value)包括 Undefined, Null, Boolean, Number, Symbol, String。 为了便于操作基本类型值,ECMAScript提供了3个特殊引用类型(基本包装类型):Boolean, Number, String。 基本包装类型,和其他引用类型一样,拥有内置的方法可以对数据进行额外操作。 每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型对象,从而可以调用一些方法操作这些数据。 比如:
参与评论 您还未登录,请先 登录 后发表或查看评论
JavaScript内置对象--基本包装类型(Boolean、Number、String)详解
冯小东
02-05 4014
一、什么是基本包装类型? 为了便于操作基本类型值,ECMAScript还提供了3个特殊的引用类型: Boolean、Number、String。这些类型与其他内置对象类型相似,但同时具有各自的基本类型相应的特殊行为。实际上,每当读取一个基本类型值得时候,后台就会创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据。 包装类型,是一个专门封装原始类型的值,并提供对原始类型的
Boolean类型和number类型
cjx177187的博客
06-18 808
是 ECMAScript 中使用得最多的一种类型,该类型只有两个字面值: true 和 false。以下是为变量赋Boolean 类型值的例子:需要注意的是,Boolean 类型的字面值 true 和 false 是区分大小写的。也就是说,True 和 False(以及其他的混合大小写形式)都不是 Boolean 值,只是标识符。虽然 Boolean 类型的字面值只有两个,但 ECMAScript 中所有类型的值都有与这两个 Boolean 值等价的值。要将一个值转换为其对应的 Boolean 值,可以调用
JavaScript原始包装类型之Boolean、Number、String特性
dx_zheng的博客
06-11 314
Boolean、Number、String特性 Boolean Boolean是对应布尔值的引用类型。要创建一个 Boolean 对象,就使用 Boolean 构造函数并传入 true 或 false。 let booleanObject = new Boolean(true); 创建之后,Boolean实例会重写valueOf()方法,返回true或false。 toString()方法返回字符串"true"或"false"。但是Boolean对象在ECMAScript中用得很少,不仅如此,它们还容易
Type number trivially inferred from a number literal, remove type annotation.
黄金蛋的博客
06-07 3890
参考资料: https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-inferrable-types.md
js代码-基本包装类型 Boolean Number String
07-14
本主题将深入探讨JavaScript中的三个基本包装类型:Boolean、Number和String,这些都是JavaScript核心语法的重要组成部分。 首先,我们来看Boolean类型。Boolean是JavaScript中的一个原始数据类型,它只有两个值:...
JavaScript基础包装类型实例详解: Boolean、Number和String
基本包装类型可以显式地调用 Boolean、Number、String 来创建对象,但尽可能不要这样做,因为这样不易区分是在处理基本类型值还是基本包装类型对象。 **Boolean 基本包装类型** Boolean 基本包装类型用于操作布尔...
vue3+ts 报错Type number trivially inferred from a number literal, remove type annotation.
zhongxiajiu的博客
05-11 475
修改vue.config.js文件,设置lintOnSave: false;
TSLint: Type number trivially inferred from a number literal, remove type annotation (no-inferrable-...
weixin_30527423的博客
07-03 2112
【出现问题的语句】 public rating: number = 0; 【解决方法】 Disable的方法: open tslint.json find the "no-inferrable-types" attribute add ignore-properties to its array 【参考】 https://stackover...
如何解决用ESLint验证导致报错的问题
艾米的猫儿的博客
12-23 4913
如何解决用ESLint验证导致报错的问题
js查缺补漏——理解Boolean、Number、String类型及其方法
最新发布
weixin_45404779的博客
10-23 1656
对象的生存期,使用new操作符创建的引用类型的实例在执行流离开当前作用域之前一直保存在内存中,而自动创建的基本包装类型的对象则只存在于一行代码的执行瞬间,然后立即被销毁。所以基本包装类型的出现的作用是为了便于操作基本类型的值,Boolean、String、Number.每当读取一个基本数据类型的值的时候,后台就会创建一个对应的基本包装类型的对象,再调用一些方法。Object构造函数也会像工厂函数一样,根据传入值的类型返回相应基本包装类型的实例。重点是String类型的特点以及对操作字符串的一些方法。
JavaScript学习笔记——基本包装类型(上)Boolean、Number
敲代码不爱找bug的妹子
03-14 442
为了便于操作基本类型值,ECMAScript还提供了三个特殊的引用类型:Boolean、Number和String。这些类型与其他引用类型相似,同时也具有与各自的基本包装类型相应的特殊行为。实际上,每当读取一个基本类型值时,后台就会创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据。var s1 = "some text"; var s2 = s1.substring(2);
vue: vue2.0 + ts + vuex 项目
qq_36413371的博客
05-22 2263
vue对ts的支持: 链接
JS中的Boolean基本类型与包装类型
谈恋爱
04-21 1142
boolean是都用过的类型,有基本类型和包装类型,之前写过一段代码,不知道错在哪里,后来翻阅书籍才知道原因 var falseObject = new Boolean(false);//使用FALSE参数创建了一个Boolean类型的对象 console.log(falseObject.valueOf());//fasle var result = falseObject && true;
Type string trivially inferred from a string literal, remove type annotation (no-inferrable-types)
热门推荐
Blog for 明月依希
06-09 1万+
TypeScript代码: private goY : string = 'www.baidu.com'; 会导致tslint报错: Type string trivially inferred from a string literal, remove type annotation (no-inferrable-types) tslint觉得自己
[tslint]报错:== should be ===(triple-equals)
幸遇三杯酒好,况逢一朵花新
05-27 2971
    最近小咸儿经历了人生一个重要的阶段,第二次参加软件设计师考试,随后也会有一篇感想附上。     接下来先总结一下之前小咸儿遇到的问题: [tslint]报错:== should be ===(triple-equals)  &n
front_end_fan

博客等级

码龄8年
238
原创
371
点赞
597
收藏
153
粉丝
关注
私信

热门文章

  • js css+html实现简单的日历 33372
  • js监听手机端的touch滑动事件 21520
  • 设置title的样式 18189
  • html5实现贪吃蛇小游戏 17224
  • javascript——touch事件介绍与实例演示 16597

分类专栏

  • ajax
    6篇
  • html5
    17篇
  • CSS3
    16篇
  • javascript
    74篇
  • css
    34篇
  • 纯CSS
    15篇
  • jquery
    35篇
  • vue
    12篇
  • 前端面试题
    4篇
  • 布局
    4篇
  • bootstrap
    6篇
  • 特殊样式
    5篇
  • app
    4篇
  • 日历
    5篇
  • 插件
    13篇
  • 移动端
    13篇
  • 正则表达式
    3篇
  • jquery源码
    14篇
  • 其他
    14篇
  • ES6
    4篇
  • SQL
  • svn
    1篇
  • IOS
    2篇
  • 兼容性
    5篇
  • 分页
  • markdown编辑器
    1篇
  • 图片上传
    1篇
  • 导出
    1篇
  • 导出excel
    1篇
  • 模板引擎
    2篇
  • 计算机基础
  • webpack
    3篇
  • amd/cmd
    1篇
  • promise
    1篇
  • Git
    1篇

展开全部 收起

上一篇:
js基础-引用类型-Date对象 ★☆
下一篇:
js基础-单体内置对象(Global、Math)

最新评论

  • js基础-富文本编辑器

    SixWeChat: 引用「index」 啥意思?

  • 原生js分页效果

    m0_51704076: 如果一页显示5条怎么改?

  • CSS特殊样式(七)CSS3下的纸张效果实现展示

    不考n2不换头像: 太好看了

  • css段落文字(中英文混杂)实现两端对齐

    清川先生: 英文单词是不允许词内换行的

  • js实现前端数据分页

    啦啦啦1326: 详情怎沫查看

大家在看

  • 链路聚合如果活动链路数达到上限后,新加入的成员接口会如何处理?
  • ABP vNext 的 Outbox/Inbox 系统化落地(非 CAP / 非 Kafka):幂等写、去重、延迟到达与死信回补

最新文章

  • vue-cli webpack全局引入jquery、elment-ui
  • 学习webpack
  • 学习git和github
2018年18篇
2017年289篇

目录

展开全部

收起

目录

展开全部

收起

上一篇:
js基础-引用类型-Date对象 ★☆
下一篇:
js基础-单体内置对象(Global、Math)

分类专栏

  • ajax
    6篇
  • html5
    17篇
  • CSS3
    16篇
  • javascript
    74篇
  • css
    34篇
  • 纯CSS
    15篇
  • jquery
    35篇
  • vue
    12篇
  • 前端面试题
    4篇
  • 布局
    4篇
  • bootstrap
    6篇
  • 特殊样式
    5篇
  • app
    4篇
  • 日历
    5篇
  • 插件
    13篇
  • 移动端
    13篇
  • 正则表达式
    3篇
  • jquery源码
    14篇
  • 其他
    14篇
  • ES6
    4篇
  • SQL
  • svn
    1篇
  • IOS
    2篇
  • 兼容性
    5篇
  • 分页
  • markdown编辑器
    1篇
  • 图片上传
    1篇
  • 导出
    1篇
  • 导出excel
    1篇
  • 模板引擎
    2篇
  • 计算机基础
  • webpack
    3篇
  • amd/cmd
    1篇
  • promise
    1篇
  • Git
    1篇

展开全部 收起

目录

评论
被折叠的  条评论 为什么被折叠? 到【灌水乐园】发言
查看更多评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值