JS基础 基本类型

原始数据类型 数据类型说明boolean布尔类型null声明null值的特殊关键字undefined代表变量未定义number整数或浮点数string字符串bigint大整数，例如lert n = 10n; 类型检测 typeof

typeof 用于返回以下原始类型

• 基本类型：number/string/boolean
• function
• object
• undefined

可以使用 typeof 用于判断数据的类型

let a = 1;
console.log(typeof a); //number

let b = "1";
console.log(typeof b); //string

//未赋值或不存在的变量返回 undefined
var hd;
console.log(typeof hd);

function run() {}
console.log(typeof run); //function

let c = [1, 2, 3];
console.log(typeof c); //object

let d = { name: "wgchen" };
console.log(typeof d); //object

instanceof

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

也可以理解为是否为某个对象的实例，typeof不能区分数组，但 instanceof 则可以。

let hd = [];
let wgchen = {};
console.log(hd instanceof Array); //true
console.log(wgchen instanceof Array); //false

let c = [1, 2, 3];
console.log(c instanceof Array); //true

let d = { name: "wgchen" };
console.log(d instanceof Object); //true

function User() {}
let hd = new User();
console.log(hd instanceof User); //true

值类型与对象

下面是使用字面量与对象方法创建字符串，返回的是不同类型。

let hd = "wgchen";
let cms = new String("willem"); 
console.log(typeof hd, typeof cms); //string object

只有对象才有方法使用，但在JS中也可以使用值类型调用方法，因为它会在执行时将值类型转为对象。

let hd = "wgchen";
let cms = new String("willem");
console.log(hd.length); // 6
console.log(cms.length); // 6

String

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

声明定义

使用对象形式创建字符串

let hd = new String('wgchen');

// 获取字符串长度
console.log(hd.length);

// 获取字符串
console.log(hd.toString());

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

let content = 'wgchen';
console.log(content);

转义符号

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

let content = 'wgchen \'willem\'';
console.log(content);

常用转义符号列表如下

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

var str = '输出 \n 换行,\n输出空格：xx\bxx,\n输出斜杠\\,\n输出双引号\"\n输出单引号\'\n输出tab缩进：\ttab缩进'
console.log(str)

连接运算符

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

let year = 2010,
name = 'wgchen';
console.log(name + '于' + year + '年');

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

let web = 'wgchen';
web += '网址：wgchen.blog.csdn.net';
console.log(web); // wgchen网址：wgchen.blog.csdn.net

模板字面量

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

let url = 'wgchen.blog.csdn.net';
console.log(`wgchen网址是${url}`); // wgchen网址是wgchen.blog.csdn.net

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

let url = 'wgchen.blog.csdn.net';
document.write(`wgchen网址是：${url}
大家可以在网站上学习到很多技术知识`);

使用表达式

function show(title) {
	return `wgchen`;
}
console.log(`${show()}`)

模板字面量支持嵌套使用

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

function template() {
  return `

      ${lessons.map((item)=>`
          
${item.title}
      `).join('')}
  
`;
}
document.body.innerHTML = template();

标签模板

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

let lesson = 'css';
let web = 'wgchen';

tag `访问${web}学习${lesson}前端知识`;

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

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

    let lessons = [
        { title: "媒体查询wgchen响应式布局", author: "willem：" },
        { title: "FLEX 弹性盒模型", author: "flex：" },
        { title: "GRID 栅格系统wgchen", author: "grid：" }
    ];

    function links(strings, ...vars) {
        return strings
            .map((str, key) => {
                return (
                    str +
                    (vars[key]
                        ? vars[key].replace(
                            "wgchen",
                            `wgchen`
                        )
                        : "")
                );
            })
            .join("");
    }

    function template() {
        return `

            ${lessons
                .map(item => links`
${item.author}:${item.title}
`)
                .join("")}
        
`;
    }

    document.body.innerHTML += template();

获取长度

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

console.log("wgchen.blog.csdn.net".length)

大小写转换

将字符转换成大写格式

console.log('wgchen.blog.csdn.net'.toUpperCase()); // WGCHEN.BLOG.CSDN.NET

转字符为小写格式

console.log('WGCHEN.BLOG.CSDN.NET'.toLowerCase()); // wgchen.blog.csdn.net

移除空白

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

let str = '   wgchen.blog.csdn.net  ';
console.log(str.length);
console.log(str.trim().length);

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

let name = '   wgchen.blog.csdn.net  ';
console.log(name);
console.log(name.trimLeft());
console.log(name.trimRight()); 

获取单字符

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

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

使用数字索引获取字符串

console.log('wgchen'[3])

截取字符串

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

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

let hd = 'wgchen.blog.csdn.net';
console.log(hd.slice(3)); // hen.blog.csdn.net
console.log(hd.substr(3)); // hen.blog.csdn.net
console.log(hd.substring(3)); // hen.blog.csdn.net

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

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

查找字符串 indexOf

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

let hd = 'wgchen.blog.csdn.net';

console.log('wgchen.blog.csdn.net'.indexOf('e')); // 9
console.log('wgchen.blog.csdn.net'.indexOf('e', 5)); // 18 从第5个字符向后搜索

lastIndexOf

从结尾来搜索字符串位置

console.log('wgchen.blog.csdn.net'.lastIndexOf('e')); // 18

// 4 从第7个字符向前搜索
console.log('wgchen.blog.csdn.net'.lastIndexOf('e', 7)); 

search

search() 方法用于检索字符串中指定的子字符串，也可以使用正则表达式搜索

let str = 'wgchen.blog.csdn.net';

console.log(str.search("net"));
console.log(str.search(/\.net/i));

includes

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

console.log('wgchen.blog.csdn.net'.includes('e')); //true
console.log('wgchen.blog.csdn.net'.includes('g', 2)); //true

startsWith

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

console.log('wgchen.blog.csdn.net'.startsWith('w')); //true
console.log('wgchen.blog.csdn.net'.startsWith('g', 1)); //true

endsWith

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

console.log('wgchen.blog.csdn.net'.endsWith('net')); //true
console.log('wgchen.blog.csdn.net'.endsWith('e', 19)); //true

下面是查找关键词的示例

const words = ["php", "css"];
const title = "我爱在热爱学习php与css知识";

const status = words.some(word => {
  return title.includes(word);
});
console.log(status); // true

替换字符串 replace

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

let str = 'wgchen.blog.csdn.net';
web = str.replace("wgchen", "willem");
console.log(web); // willem.blog.csdn.net

默认只替换一次，如果全局替换需要使用正则。

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

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

const word = ["php", "css"];
const string = "我喜欢学php与css知识";

const title = word.reduce((pre, word) => {
  return pre.replace(word, `