JavaScript的基本类型之String

String类型

字符串类型是使用非常多的数据类型，也是相对简单的数据类型。

声明定义

let hd = new String('houdunren');
// 获取字符串长度
console.log(hd.length);
// 获取字符串
console.log(hd.toString());

字符串使用单、双引号包裹，单、双引号使用结果没有区别。

let content = '后盾人';
console.log(content);

转义符号

有些字符有双层含义，需要使用 \ 转义符号进行含义转换。下例中引号为字符串边界符，如果输出引号时需要使用转义符号。

let content = '后盾人 'houduren.com'';
console.log(content);

常用转义符号列表如下

符号	说明
\t	制表符
\n	换行
\	斜杠符号
'	单引号
"	双引号R

连接运算符

使用 + 可以连接多个内容组合成字符串，经常用于组合输出内容使用。

let year = 2010,
name = '后盾人';
console.log(name + '成立于' + year + '年');

使用 += 在字符串上追回字符内容

let web = '后盾人';
web += '网址：houdunren.com';
console.log(web); //后盾人网址：houdunren.com

模板字面量

使用 ... 符号包裹的字符串中可以写入引入变量与表达式

let url = 'houdunren.com';
console.log(`后盾人网址是${url}`); //后盾人网址是houdunren.com

支持换行操作不会产生错误

let url = 'houdunren.com';
document.write(`后盾人网址是${url}
大家可以在网站上学习到很多技术知识`);

使用表达式

function show(title) {
	return `后盾人`;
}
console.log(`${show()}`)

模板字面量支持嵌套使用

let lessons = [
	{title: '媒体查询响应式布局'},{title: 'FLEX 弹性盒模型'},{title: 'GRID 栅格系统'}
];

function template() {
  return `<ul>
      ${lessons.map((item)=>`
          <li>${item.title}</li>
      `).join('')}
  </ul>`;
}
document.body.innerHTML = template();

标签模板

标签模板是提取出普通字符串与变量，交由标签函数处理

let lesson = 'css';
let web = '后盾人';
tag `访问${web}学习${lesson}前端知识`;

function tag(strings, ...values) {
    console.log(strings); //["访问", "学习", "前端知识"]
    console.log(values); // ["后盾人", "css"]
}

下面例子将标题中有后盾人的使用标签模板加上链接

let lessons = [
  { title: "后盾人媒体查询响应式布局", author: "后盾人向军" },
  { title: "FLEX 弹性盒模型", author: "后盾人" },
  { title: "GRID 栅格系统后盾人教程", author: "古老师" }
];

function links(strings, ...vars) {
  return strings
    .map((str, key) => {
      return (
        str +
        (vars[key]
          ? vars[key].replace(
              "后盾人",
              `<a href="https://www.houdunren.com">后盾人</a>`
            )
          : "")
      ); 
    })
    .join("");
}

function template() {
  return `<ul>
    ${lessons
      .map(item => links`<li>${item.author}:${item.title}</li>`)
      .join("")}
</ul>`;
}
document.body.innerHTML += template();

获取长度

使用length属性可以获取字符串长度

console.log("houdunren.com".length)

大小写转换

将字符转换成大写格式

console.log('houdunren.com'.toUpperCase()); //HOUDUNREN.COM

转字符为小写格式

console.log('houdunren.com'.toLowerCase()); //houdunren.com

移除空白

使用trim删除字符串左右的空白字符

let str = '   houdunren.com  ';
console.log(str.length);
console.log(str.trim().length);

使用trimLeft删除左边空白，使用trimRight删除右边空白

let name = " houdunren ";
console.log(name);
console.log(name.trimLeft());
console.log(name.trimRight()); 

获取单字符

根据从0开始的位置获取字符

console.log('houdunren'.charAt(3))

使用数字索引获取字符串

console.log('houdunren'[3])

截取字符串

使用 slice、substr、substring 函数都可以截取字符串。

• slice、substring 第二个参数为截取的结束位置
• substr 第二个参数指定获取字符数量

let hd = 'houdunren.com';
console.log(hd.slice(3)); //dunren.com
console.log(hd.substr(3)); //dunren.com
console.log(hd.substring(3)); //dunren.com

console.log(hd.slice(3, 6)); //dun
console.log(hd.substring(3, 6)); //dun
console.log(hd.substring(3, 0)); //hou 较小的做为起始位置
console.log(hd.substr(3, 6)); //dunren

console.log(hd.slice(3, -1)); //dunren.co 第二个为负数表示从后面算的字符
console.log(hd.slice(-2));//om 从末尾取
console.log(hd.substring(3, -9)); //hou 负数转为0
console.log(hd.substr(-3, 2)); //co 从后面第三个开始取两个

查找字符串

从开始获取字符串位置，检测不到时返回 -1

console.log('houdunren.com'.indexOf('o')); //1
console.log('houdunren.com'.indexOf('o', 3)); //11 从第3个字符向后搜索

从结尾来搜索字符串位置

console.log('houdunren.com'.lastIndexOf('o')); //11
console.log('houdunren.com'.lastIndexOf('o', 7)); //1 从第7个字符向前搜索

includes 字符串中是否包含指定的值，第二个参数指查找开始位置

console.log('houdunren.com'.includes('o')); //true
console.log('houdunren.com'.includes('h', 11)); //false

startsWith 是否是指定位置开始，第二个参数为查找的开始位置。

console.log('houdunren.com'.startsWith('h')); //true
console.log('houdunren.com'.startsWith('o', 1)); //true

endsWith 是否是指定位置结束，第二个参数为查找的结束位置。

console.log('houdunren.com'.endsWith('com')); //true
console.log('houdunren.com'.endsWith('o', 2)); //true

下面是查找关键词的示例

const words = ["php", "css"];
const title = "我爱在后盾人学习php与css知识";
const status = words.some(word => {
  return title.includes(word);
});
console.log(status); // true

替换字符串

replace 方法用于字符串的替换操作

let name = "houdunren.com";
web = name.replace("houdunren", "hdcms");
console.log(web);

默认只替换一次，如果全局替换需要使用正则（更强大的使用会在正则表达式章节介绍）

 let str = "2023/02/12";
 console.log(str.replace('/', "-")) // 2023-02/12

使用字符串替换来生成关键词链接

 const word = ["php", "css"];
    const string = "我喜欢在后盾人学习php与css知识";
    const title = word.reduce((pre, word) => {
      return pre.replace(word, `<a href="?w=${word}">${word}</a>`);
    }, string);
    console.log(title);  // 我喜欢在后盾人学习<a href="?w=php">php</a>与<a href="?w=css">css</a>知识
    document.body.innerHTML += title;

使用正则表达式完成替换

let res = "houdunren.com".replace(/u/g, str => {
  return "@";
});
console.log(res);

重复生成

下例是根据参数重复生成星号

function star(num = 3) {
	return '*'.repeat(num);
}
console.log(star());

下面是模糊后三位电话号码

 let phone = "98765432101";
 console.log(phone.slice(0, -3) + "*".repeat(3)); // 98765432***

类型转换

分隔字母

let name = "hdcms";
console.log(name.split(""));

将字符串转换为数组

console.log("1,2,3".split(",")); //[1,2,3]

隐式类型转换会根据类型自动转换类型

let hd = 99 + '';
console.log(typeof hd); //string

使用 String 构造函数可以显示转换字符串类型

let hd = 99;
console.log(typeof String(hd));

js中大部分类型都是对象，可以使用类方法 toString转化为字符串

 let hd = 99;
    console.log(typeof hd.toString()); //string

    let arr = ['hdcms', '后盾人'];
    console.log(typeof arr.toString()); //string
    console.log(arr.toString()); //  hdcms,后盾人