JS基本数据类型-字符串

字符串

在JS中用单引号或双引号包起来的值都是字符串, 一个字符串由零个或多个字符组成.

字符串中的每一串字符都有一个相对应的位置索引, 也有类似数组的length代表数组长度.

var str = "xiaomi";
console.log(str[4]);                // m
console.log(str.length);            // 6

字符串常用的方法

字符串是基本数据类型, 字符串的每一次操作都是对值直接进行的操作, 不像数组是基于内存地址的操作, 所以对字符串的操作都不会改变原有值.

charAt/charCodeAt

• 作用: charAt根据索引获取指定位置的字符. charCode获取该索引字符对应的Unicode编码值.
• 参数: 索引
• 返回值: 字符/字符对应的编码

var str = "xiaomi";
console.log(str.charAt(4));         // m

// charAt和直接用索引取字符的区别:
// 当超出索引范围时, 直接使用索引获取的值是undefined, 运行机制和对象是一样的, 而通过charAt获取的是空字符
console.log(str.charAt(100));       // 空
console.log(str[100]);              // undefined

console.log(str.charCodeAt(4));     // 109

indexOf/lastIndexOf

• 作用: 获取字符在字符串中 第一次/最后一次 出现位置的索引. 基于这两个方法可以验证当前字符是否属于该字符串.
• 参数: 字符
• 返回值: 有就返回索引值, 没有返回-1

var str = "xiaomi";
console.log(str.indexOf('i'));      // 1
console.log(str.lastIndexOf('i'));  // 5
console.log(str.indexOf('h'));      // -1

if (str.lastIndexOf('@') > -1) {
// 条件成立说明包含@符合
}

slice(切片)

• 作用: str.slice(m,n) 从索引m查找到索引n前一位字符
• 参数: 索引
• 返回值: 查找的字符串

// 和数组使用方法相同
var str = "xiaomishouji";
console.log(str.slice(2,5));            // aom
console.log(str.slice(2));              // aomishouji
console.log(str.slice());               // xiaomishouji
console.log(str.slice(-5,-2));          // hou

substring

substring 方法和 slice 方法用法一样, 唯一区别是 substring 不支持负数索引.

substr

• 作用: str.slice(m,n) 从索引m查n个字符, 支持m为负数
• 参数: 索引,个数
• 返回值: 查找的字符串

var str = "xiaomishouji";
console.log(str.substr(2,5));           // aomis
console.log(str.substr(2));             // aomishouji
console.log(str.substr());              // xiaomishouji
console.log(str.substr(-5,3));          // hou

toUpperCase/toLowerCase

• 作用: 将字符串转化成大写/小写字符
• 参数: 无
• 返回值: 新的字符串

var str = "xiaoMisHouji";
console.log(str.toUpperCase());         // XIAOMISHOUJI
console.log(str.toLowerCase());         // xiaomishouji

split(切割)

• 作用: 将字符串按照指定参数作为分隔符切割成数组
• 参数: 无/分隔符
• 返回值: 数组

var str = "xiaomishouji";
// 将 i 作为分隔符进行切割, 特别要注意分隔符在最开始和末尾的情况
console.log(str.split('i'));            // ["x", "aom", "shouj", ""]
console.log(str.split());               // ["xiaomishouji"]

// split 和 join 对比
var ary = [12, 23, 34];
console.log(ary.join("+"));             // 12+23+34
var str1 = "12+23+34";
console.log(str1.split("+"));           // ["12", "23", "34"]

replace

• 作用: 替换字符串中的原字符
• 参数: 原有字符,替换的新字符
• 返回值: 替换后新的字符串

// 在不使用正则的情况下, replace一次只能替换一个匹配
var str = "xiaomishoujixiaomidianshi";
str = str.replace("xiaomi","华为");
console.log(str);                         // 华为shoujixiaomidianshi
console.log(str.replace("xiaomi","华为"));// 华为shouji华为dianshi

includes

localeCompare

search

trim

字符串应用案例

1. 时间格式化

将时间字符串 “2019-05-10 13:33:9″ 转换成”05月10日 13时33分”

方案一:
1. 基于split按照空格把字符串拆成两部分(数组中的两项)
2. 第一项继续以split按照-拆分
3. 第二项以split按照:拆分
4. 将需要的信息拼接在一起即可, 拼接的时候不足十位的需补零

var str = "2019-5-10 13:33:9";
var ary = str.split(" "),
ary1 = ary[0].split("-"),
ary2 = ary[1].split(":");
var month = addZero(ary1[1]),
day = addZero(ary1[2]),
hour = addZero(ary2[0]),
min = addZero(ary2[1]);
function addZero(agr) {
return agr < 10?"0" + agr : agr;
}
console.log(month + "月" + day + "日 " + hour + "分" + min + "秒")

方案二(万能法):
~function (pro) {
    pro.formatTime = function (template) {
        template = template || '{0}年{1}月{2}日 {3}时{4}分{5}秒';
        var ary = this.match(/\d+/g);
        template = template.replace(/\{(\d+)\}/g, function () {
            var n = arguments[1],
                val = ary[n] || "0";
            val < 10 ? val = "0" + val : null;
            return val;
        })
        return template;
    }
}(String.prototype);
console.log(str.formatTime());
console.log(str.formatTime('{1}月{2}日 {3}时{4}分'));

2. URL地址截取