js中字符串操作
字符串API
包装类型和字符串的不可变性
- 1.包装类型
- 包装类型:简单数据类型对应的复杂形势!
//包装类型:String/Number/Boolean;
//简单类型:string/number/boolean/undefined/null;
//1.包装类型;
var obj = new Object();
obj.aaa = 111;//自定义属性
console.log(obj.aaa);// 111 获取属性值
//number:简单数据类型不可以自定义属性
var num = 111;
num.bbb = 222;
console.log(num.bbb);// undefined 简单数据类型不可以自定义属性;
//简单数据类型有属性!!!
var str = "abc";
console.log(str.length); // 3
- 2.字符串的不可变性
(字符串一旦定义就不会被修改,想要修改重新开辟空间)
根据索引查字符
1.charAt( )
//1.字符串.charAt(索引值); 字符串中对应索引值的字符。
//兼容性很棒;
例:
var str = "0Aabcd我&";
console.log(str.charAt(1));// A
console.log(str.charAt(3));// b
console.log(str.charAt(str.length-2)); // 我
console.log(str.charAt(str.length-1)); // &
2.字符串[索引值]
// 用法 str[0]
字符串[索引值] // 和数组一样;但是兼容性不好;H5新增,ie678不支持; 用法和charAt一样
例:
var str = "0Aabcd我&";
console.log(str[1]); // A
console.log(str[3]); // b
console.log(str[str.length-2]); // 我
console.log(str[str.length-1]); // &
3.字符串.charCodeAt(索引值)
字符串.charCodeAt(索引值); // 给索引,查对应的Unicode编码;
console.log(str.charCodeAt(0)); // 48
console.log(str.charCodeAt(1)); // 65
console.log(str.charCodeAt(2)); // 97
根据字符查索引
1.indexOf( )
例:
//indexOf(); 给字符查索引(从前往后)
var str = "abcdcbb";
console.log(str.indexOf("a"));// 0
console.log(str.indexOf("b"));// 1
console.log(str.indexOf("xxx"));//查不到返回 -1
//查多个字符
console.log(str.indexOf("abc"));// 0 以首个单词字符为准;
console.log(str.indexOf("ac")); // 不完整或者顺序不对都是-1;
console.log(str.indexOf("acb"));// 不完整或者顺序不对都是-1;
2.lastIndexOf()
lastIndexOf(); // 给字符查索引(从后往前)
//同理indexOf;
//字符串一旦声明,索引值就固定了,无论从前往后,还是从后往前,索引值都是固定的
var str = "abcdcbb";
console.log(str.lastIndexOf("b"));//6
字符串连接和截取
concat( )
// 拼接字符串 (拼接字符串更喜欢直接用 + )
var str1 = "123";
var str2 = "abc";
console.log(str1.concat(str2)); // 123abc
//拼接数组
var arr1 = [11,22,33];
var arr2 = [44,55,66];
console.log(arr1.concat(arr2)); // [1, 12, 33, 44, 55, 66]
slice( )
var str = "123abc";
slice() //从start位置开始,截取到end位置,end取不到
//和数组的完全一样: 字符串.slice(开始索引值,结束索引值);
console.log(str3.slice(3)); //从索引值为3的元素截取到最后 abc
console.log(str3.slice(0,3)); //包左不包右 123
console.log(str3.slice(-2)); //从后面截取两个 bc
console.log(str3.slice(3,0)); s//前面一个数大,后面的数小; 返回 "";
substr( )
var str = "123abc";
substr() //开始索引值,截取几个;
console.log(str3.substr(3)); //从索引值为3的元素截取到最后 abc
console.log(str3.substr(2,1)); //从索引值为2的往后截取一个 3
console.log(str3.substr(-2)); //从后面截取两个 bc
//前后不一样大没问题,因为第二个参数是截取几个的意思;
substring( )
var str = "123abc";
substring() //开始索引值,结束索引值;
//和slice();同样
console.log(str3.substring(3)); //从索引值为3的元素截取到最后 abc
console.log(str3.substring(0,3)); //包左不包右 123
//不同:
console.log(str3.substring(-2)); //全部截取 123abc
console.log(str3.substring(3,4)); //智能调换 a (截取索引为3的第四个字符)
console.log(str3.substring(3,5)); //智能调换 ab (从索引为3的开始截取到第5个字符)
字符串大小写转换
str.toLowerCase(); // 英文字符转换成小写;
str.toUpperCase(); // 英文字符转换成大写;
//上传文件的时候用; 因为后缀名,不区分大小写;
trim( ) 去除字符串前后空白
search( ) 给字符查索引
replace( ) 替换
var str = "Today is a good day, today is a good day.";
//无法忽略大小写,而且只能替换一个 Tomorrow is a good day, today is a good day.
console.log(str.replace("Today","Tomorrow"));
//g: 全局替换; i: 忽略大小写! Tomorrow is a good day, Tomorrow is a good day.
console.log(str.replace(/today/ig,"Tomorrow"));
split( ) 字符串转化成数组
// split() 和 join() 是一对!
var str = "aaa|bbb|ccc"; //字符串会根据参数被分割成几部分;变成一个数组;
console.log(str.split("|"));// ["aaa", "bbb", "ccc"] 按 | 进行分割 , 参数不会出现在数组中;
console.log(str.split()); // ["aaa|bbb|ccc"] 不带参数,整体作为一个元素;
console.log(str.split("")); // ["a", "a", "a", "|", "b", "b", "b", "|", "c", "c", "c"] 每一个字符都算一个元素;
字符串案例
1.判断一个字符串中出现次数最多的字符,统计这个次数
var str = "abcoefoxyozzopp";
// a:1,b:1,c:1...... 键值对; 对象或者json记录;
// 思路:遍历字符串中的每一个元素,从json/对象中查找.
// 判断:有的话,值自增1;没有的话,设置该属性,值为1;
var json = {};//将来往里面装属性和值;{属性就是字符串中的元素,值就是出现的次数}
//for循环遍历
for(var i=0;i<str.length;i++){
//判断:有的话,值自增1;没有的话,设置该属性,值为1;
var zimu = str.charAt(i);//str里面的每一个字符串;根据i自增可以获取到每一个
if(json[zimu] === undefined){//把字符作为json中的属性查找,如果为undefined就说明不存在;
//没有就添加一个
json[zimu] = 1;//给这个属性,赋值为1;
}else{
//如果存在,就把值在原有基础上+1;
json[zimu] += 1;
}
}
console.log(json); // {a: 1, b: 1, c: 1, o: 4, e: 1, …}
2.获取url中?后面的内容,并转化成对象的形式。例如:http://www.itaaaaa.com/login?...
var str = "http://wwwaitaaaaa.com/login?name=zs&age=18&a=1&b=2";
//思路:找到?,然后截取到最末尾;把字符串按照&分割;可以再次按照=分割,然后创建对象
var index = str.lastIndexOf("?");
console.log(index); // 28
var str2 = str.slice(index+1);
console.log(str2); // name=zs&age=18&a=1&b=2
//以&符号分割转换成数组;
var arr = str2.split("&");
console.log(arr); // ["name=zs", "age=18", "a=1", "b=2"]
var obj = new Object();
//for循环把数组中的每一个元素都遍历出来,然后前面的做属性,后面的做值;
for(var i=0;i<arr.length;i++){
//把数组中的元素,再次切割,然后根据索引值设置属性和值;
var newArr = arr[i].split("=");
//新数组中的第一个做属性,第二个做值;
obj[newArr[0]] = newArr[1];
}
console.log(obj); // {name: "zs", age: "18", a: "1", b: "2"}
苦海无涯
苦海无涯,回头是岸,早点努力,少走弯路。
推荐阅读
记录 Vue CLI3 项目中解决IE浏览器语法兼容导致页面报错白屏问题
vue cli3创建的项目发现在ie浏览器运行中出现语法错误,导致页面报错加载出现空白,然后自己查阅资料发现是在IE11及以下版本中大量ES6语法不支持,然后摸索测试一番后发现可以正常访问了。
WeBen赞 1阅读 1.8k
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...
边城赞 31阅读 7.2k评论 5
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...
chokcoco赞 20阅读 2.1k评论 2
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...
边城赞 17阅读 2k
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!
SegmentFault思否赞 20阅读 5.6k评论 10
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...
边城赞 18阅读 7.7k评论 3
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...
原谅我一生不羁放歌搞文艺赞 14阅读 20k评论 9
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。