JS-字符串相关

创建字符串

1. 字面量创建
   • 语法：变量 = 字符串
   • 得到一个基本数据类型的字符串
2. 内置构造函数创建
   • 语法：变量 = new String('字符串')
   • 得到一个字符串对象

字符串特性

• 字符串是一组有序的字符集合
• 字符串具有索引与长度特性
  • 字符串索引
    • 字符串索引是只读属性
      • 语法：字符串[索引]
      • 返回值：索引对应的字符，不存在则返回undefined
  • 字符串长度
    • 字符串长度是只读属性
      • 语法：字符串.length
      • 返回值：字符串的字符个数
• 如何遍历字符串的字符
  • 通过索引与长度完成遍历

var str = 'qwert';

// 索引
console.log(str[0]); // 'q'
console.log(str[3]); // 'r'
console.log(str[30]); // undefined
str[0] = 'a'; // 修改无效

console.log(str); // 'qwert'

// 长度
console.log(str.length); // 5
str.length = 1; // 修改无效

console.log(str); // 'qwert'


// 遍历字符串
for (var i = 0; i < str.length; i++) {
    console.log(str[i]);
}

统计字符串中每个字符出现的次数

• 思路：利用对象的属性名是唯一的（不重复），来统计次数
  • 假设对象：{ q: 3, ... } ==> 表示字符q出现了3次
  • 可以使用字符串的字符作为对象的属性名使用，属性值为该字符在字符串中出现的次数
• 实现：
  1. 创建一个空对象
  2. 遍历字符串，拿到每一个字符
  3. 判断与字符一样的属性名在对象中是否存在（利用in语法）
     • 如果不存在，说明该字符是第一次在字符串中出现
       • 将该字符作为属性名添加至对象并赋值为1
     • 如果存在，说明该字符不是第一次在字符串中出现
       • 将该字符属性名对应的属性值+1

var str = 'qwertyuiasdfuytreertyasdqweraqweas';

// 写法1
var obj = {};
for (var i = 0; i < str.length; i++) {
    // 判断str[i]在obj中是否存在
    if (str[i] in obj) {
        // 不是第一次出现
        obj[str[i]]++;
    } else {
        // 第一次出现
        obj[str[i]] = 1;
    }
}
for (var s in obj) {
    document.write(`字符${s}出现了${obj[s]}次<br>`);
}

// 写法2
var rObj = Array.from(str).reduce(function(p, v) {
    v in p ? p[v]++ : p[v] = 1;
    return p;
}, {});
for (var s in rObj) {
    document.write(`字符${s}出现了${rObj[s]}次<br>`);
}

• 统计出现次数最多的字符

// 取出对象中的所有键值作为数组数据，组成一个数组
// 将数组降序排序，第一个数据即为最大值（每个字符出现次数的最大值）
var n = Object.values(rObj).sort((a, b) => b - a)[0];
// 取出对象中的所有键值对作为数组数据，组成一个二维数组
// 将出现次数（v[1]）等于最大值（n）的数组数据过滤出来，组成一个的二维新数组
var r = Object.entries(rObj).filter(v => v[1] == n);

// 最终得到出现次数最多的字符是'e'，出现了5次
console.log(r); // [['e', 5]]

查询字符串

<form action="https://www.xxx.com">
    名字：<input type="text" name="username"><br>
    年龄：<input type="text" name="userage"><br>
    <input type="submit" value="提交">
</form>

• 在input框中输入内容后（名字输入zs，年龄输入18），点击提交按钮，表单默认提交
  • 提交地址为action属性值
  • https://www.xxx.com/?username=zs&userage=18
    • username=zs&userage=18就是查询字符串
• 查询字符串
  • key1=value1&key2=value2
    • 由多个键值对通过&连接的字符串
    • 键值对通过=连接
  • 作用：主要用于前端请求后端时，给后端传递的数据
• 封装函数将查询字符串转为对象

var str = 'current=1&pageSzie=17&search=abc';

function parseQs(str) {
    return str.split('&').reduce(function(p, v) {
        p[v.split('=')[0]] = v.split('=')[1];
        return p;
    }, {})
}

var o = parseQs(str);
console.log(o); // { current: '1', pageSzie: '17', search: 'abc' }

• 封装函数将对象转为查询字符串

var obj = { current: '1', pageSzie: '17', search: 'abc' };

function queryStringify(o) {
    var str = '';
    for (var key in o) {
        str += `${key}=${o[key]}&`
    }
    return str.slice(0, -1);
}

var s = queryStringify(obj);
console.log(s); // 'current=1&pageSzie=17&search=abc'

JSON格式字符串

• 作用：一般后端给前端返回的数据都是以JSON格式返回
• 本质上还是字符串，只不过JSON格式字符串格式比较严格
• 在JSON格式字符串中：
  1. 特殊字符只能由{}, [], :组成
  2. 一般只会有对象、数组、数值、布尔或字符串文本等数据结构
  3. 对象的属性名必须使用双引号包裹
  4. 属性值或数组数据
     • 如果是文本内容则必须使用双引号包裹
     • 如果时数值或布尔值则可以不用引号包裹
  5. 对象或数组的最后一项之后不能有多余的逗号
• 在js中提供了JSON格式字符串的操作方法
  1. JSON.parse
     • 语法：JSON.parse(JSON格式字符串)
     • 返回值：转换后的js类型数据
     • 只要出现错误：Unexpected xxx... JSON at position xxx...
       • 说明执行JSON.parse方法并且传入了非JSON格式字符串

  var str = '{"a":1,"b":2,"c":3}';
  console.log(JSON.parse(str)); // { a: 1, b: 2, c: 3 }
  

  2. JSON.stringify
     • 语法：JSON.stringify(js类型数据)
     • 返回值：JSON格式字符串

  var obj = { a: 1, b: 2, c: 3};
  console.log(JSON.stringify(obj)); // '{"a":1,"b":2,"c":3}'
  
  var arr = [{ a: 1, b: 2 }, { a: true, b: false }];
  console.log(JSON.stringify(arr)); // '[{"a":1,"b":2},{"a":true,"b":false}]'