前言

  字符串作为 JavScript 的基本数据类型,在开发以及面试过程中作为程序员对基础掌握情况的重要考点,本文来总结一下字符串的相关属性以及用法。包含了ES6中的一些新语法特性。

正文

  1.字符串的创建

  JavaScript 中创建字符串的方法主要有两种。一种是通过字面量的方式创建,另一种是通过构造函数创建。分别如下:

    // 字面量方式
var str = "hello world";
console.log(str)//hello world
console.log(typeof str);//string // 构造函数方式
var strr = new String("hello Serendipity")
console.log(strr)//String {"hello Serendipity"}
console.log(typeof strr);//object // 两种方式区别
var str = 'hello';
var strr = new String('hello')
var strrr = new String('hello')
console.log(str == strr);//true
console.log(str === strr);// false 两者类型不通,分别是String 和 Object 类型
console.log(strr == strrr);//false 存放在栈中的地址不相同
console.log(strr === strrr);//false 两者在堆中存放的值相同,但是 不是指向同一个值,同样栈中地址不同

  2.转义字符和模板字符串

  字符串中双引号里面不能包含双引号,单引号里面不能包含单引号,如果想要用到这些关键字符,需要使用转义字符表示,例如:转义字符  \'可以表示为'              \\表示为\           \\'表示为\'

        var str1 = '001'
var str2 = '002\'这是\\\\一个字符串·'
console.log(str1);//001
console.log(str2);//002'这是\\一个字符串·

  同样使用转义字符可以达到换行符、回车的作用:

        //同样转义字符实现字符串换行
var str = '<br>this \
<br>is a \
<br>book';
console.log(str);//<br>this <br>is a <br>book
//转义字符还可以将有意义的和没意义的字符进行转换
// \n是新行 \t是回车 \t水平制表符
var st = 'this\n \ris a \tbook'
console.log(st);//this //is a book

  es6中为了解决换行导致代码不规则的这种问题,引入了模板字符串,用反引号``包裹住字符串达到换行效果,同时可以直接使用类似于插值表达式的方法获取其值。如下:

        //ES6声明字符串的模板  反引号~键位
var ss = '<i>www</i>\
<h2>baidu</h2>.com'
console.log(ss);//<i>www</i>
//<h2>baidu</h2>.com
//使用反引号声明字符串 在反引号中不需要使用\换行》》》m模板字符串
var host = 'www'
var yuming = 'baidu'
var qy = 'com';
var str = `<i>${host}</i><h2>${yuming}</h2>.${qy}`
console.log(str);//<i>www</i><h2>baidu</h2>.com

  3.属性

  length属性 ,返回字符串的长度,记住是属性,不是方法。

  constructor属性,对创建字符串对象的String构造函数的引用。

  prototype属性,js中通过构造函数创建的对象实例,都有一个prototype(原型)属性,这个属性是一个指针,这个指针指向一个对象,而这个对象就包含了通过构造函数所实例化的所有实例共享的属性和方法,prototype属性能让构造的实例有能力访问这些属性和方法。

  4.方法

  (1)charAt()方法,返回指定索引位置的字符。charCodeAt()方法,返回指定索引位置字符对应的unicode值。fromCharCode()方法,将Unicode转化为字符串。

    var str = "hello Serendipity"
console.log(str.charAt(2));//l
console.log(str.charCodeAt(2));//108
console.log(String.fromCharCode(108));//l

  (2)concat()方法,连接两个字符串,返回连接之后的字符串。

    var str1 = "hello "
var str2 = "serendipity"
console.log(str1.concat(str2));//hello serendipity

  (3)valueOf()方法,返回某个字符串对象的原始值。toString()方法,返回字符串对象值。

    var str = "hello Serendipity"
console.log(str.valueOf());//hello Serendipity
console.log(str.toString());//hello Serendipity
var strr = new String("hello Serendipity")
console.log(strr.valueOf());//hello Serendipity
console.log(strr.toString());//hello Serendipity

  (4)subString()方法,提取字符串中两个指定索引之间的字符。substr()方法,从起始索引号提取指定数目的字符。slice()方法提取字符串的片段,并在新的字符串中返回被提取的部分。

    var str = "hello Serendippity"
// substring(from, [to]) 方法用于提取字符串中介于两个指定下标之间的字符,方返回的子串包括 start 处的字符,
// 但不包括 stop 处的字符,to 可选,如果省略该参数,那么返回的子串会一直到字符串的结尾。substring() 不接受负的参数。
console.log(str.substring(2));//llo Serendippity
console.log(str.substring(2,5));//llo
console.log(str.substring(-1));//hello Serendippity // substr(start, [length]) 方法可在字符串中抽取从 start 下标开始的指定数目的字符。返回一个新的字符串,包含从 start(包括 start 所指的字符) 处开始的
// length 个字符。如果没有指定 length,那么返回的字符串包含从 start 到该字符串的结尾的字符。
console.log(str.substr(2));//llo Serendippity
console.log(str.substr(2,5));//llo S
console.log(str.substr(-2));//ty // slice(start, [end]) 方法可提取字符串的某个部分,返回一个新的字符串。包括字符串从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。
console.log(str.slice(2));//llo Serendippity
console.log(str.slice(2,5));//llo
console.log(str.slice(-2));//ty

  (4)indexOf()方法,返回字符串中检索指定字符串第一次出现的位置。lastIndexOf()方法,返回字符串中检索指定字符串最后一次出现的位置。includes()方法,判断字符串中是否包含指定的子字符串。

    var str = "hello serendipity"
console.log(str.indexOf("l"));//2
console.log(str.lastIndexOf("i"));//14
console.log(str.includes("dipi"));//true
console.log(str.includes("pidi"));//false

  (5)search()方法,索引与正则表达式相匹配的值。replace()方法,替换与正则表达式匹配的子串。replaceAll()方法,替换与正则表达式匹配的所有子串。match()方法,找打一个或多个正则表达式的匹配。

    var str = "hello Serendipity"
// search()方法接收一个正则作为参数,如果字符串中能匹配正则,则返回匹配字串的起始位置,否则返回-1
console.log(str.search(/llo/));//2
console.log(str.search(/LLO/));//-1
//replace()接收两个参数,第一个为需要替换的正则或者字符串,第二个参数为替换成为的内容,返回替换之后的结果
console.log(str.replace(/l/,"o"));//heolo Serendipity
// replaceAll()接收两个参数,第一个为需要替换的正则或者字符串,第二个参数为替换成为的内容,返回替换之后的结果,
   //相比replace,只是多了全局的作用范围,同样在replace中用正则可以实现replaceAll的效果
console.log(str.replace(/l/g,"o"));//heooo Serendipity
console.log(str.replaceAll("l","o"));//heooo Serendipity

  (6)toUpperCase()方法,把字符串转为大写。toLowerCasse()方法,把字符串转为小写。toLocalLowerCase()方法和toLocalUpperCase()方法根据主机语言环境把字符串转化为相应的大小写。

    var str = "hello Serendipity"
console.log(str.toUpperCase());//HELLO SERENDIPITY
console.log(str.toLowerCase());//hello Serendipty
console.log(str.toLocaleUpperCase());//HELLO SERENDIPITY
console.log(str.toLocaleLowerCase());//hello Serendipty

  (7)trim()方法,去掉字符串两头的空格。

    var str = "   hello Serendipity   "
console.log(str.trim());//hello Serendipty
console.log(str.length);//23
console.log(str.trim().length);//17

  (8)startsWith()方法,判断字符串是否以指定的字符串开始的。endsWith()方法,判断字符串是否是以指定的字符串结束的。

    var str = "hello Serendipity"
console.log(str.startsWith("hello"));//true
console.log(str.startsWith("seren"));//false
console.log(str.endsWith("pity"));//true
console.log(str.endsWith("hrllo"));//false

  (9)repeat()方法,返回一个字符串复制粘贴多次之后的新字符串。

    var str = "hello Serendipity"
console.log(str.repeat(2));//hello Serendipityhello Serendipity

  (10)split()方法,将字符串按指定字符分割为数组

    var str = "red,blue,green"
console.log(str.split(","));//(3) ["red", "blue", "green"]

总结

  以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。

 

js--你需要知道的字符串使用方法(含es6及之后)的更多相关文章

  1. 使用js在HTML中自定义字符串格式化方法

    Python中支持字符串格式化,其基本形式如下: str = "I'm {name},{age} years old" print(str.format(name="te ...

  2. js中常用的操作字符串的方法大全

    charCodeAt()返回一个整数,代表指定字符的Unicode编码 fromCharCode()从一些Unicode字符串得到一个字符串  charAt()根据指定下标位置返回对应字符,如果下标超 ...

  3. 常用js对象、数组、字符串的方法

    字符串charAt() 返回在指定位置的字符.charCodeAt() 返回在指定的位置的字符的 Unicode 编码.concat() 连接字符串.indexOf() 检索字符串.match() 找 ...

  4. 浅谈 js 字符串 trim 方法之正则篇

    原文:浅谈 js 字符串 trim 方法之正则篇 关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格   等 ...

  5. 浅谈 js 字符串 search 方法

    原文:浅谈 js 字符串 search 方法 这是一个很久以前的事情了,好像是安心兄弟在学习js的时候做的练习.具体记不清了,今天就来简单分析下 search 究竟是什么用的. 从字面意思理解,一个是 ...

  6. js生成随机固定长度字符串的简便方法

    概述 碰到一个需求:用js生成固定长度的字符串.在网上查了很多资料,网上的方法都比较麻烦.我自己灵光一现,实现了一个比较简单的方法.记录下来,供以后开发时参考,相信对其他人也有用. js生成随机字符串 ...

  7. JS json对象(Object)和字符串(String)互转方法

    [JS json对象(Object)和字符串(String)互转方法] 参考:https://blog.csdn.net/wenqianla2550/article/details/78232706 ...

  8. js 字符串转方法,this域绑定

    闲着没事,开发一个列表页面配置的功能,其中涉及到了按钮点击事件,在页面进行编辑,保存到数据库中.写好的js脚本,function是字符串格式,所以要让生成的脚本生效,还要做一些操作. 1.首先保存在数 ...

  9. [JS高程] 字符串模式匹配方法

    目录 1. RegExp 对象 2. 字符串模式匹配方法 2.1 match() , search() 2.2 replace() 2.2.1 第二个参数为字符串的应用情况 2.2.2 第二个参数为函 ...

随机推荐

  1. 攻防世界(四)php_rce

    攻防世界系列:php_rce 1.打开题目 看到这个还是很懵的,点开任意连接都是真实的场景. 2.ThinkPHP5,这里我们需要知道它存在 远程代码执行的漏洞. ?s=index/\think\ap ...

  2. Centos7使用mail命令发送邮件

    以配置outlook邮箱(微软邮箱)为例 一.配置mail邮箱账号密码 [root@bogon log]# tail -n 8 /etc/mail.rc set from=bp**@outlook.c ...

  3. inux软件安装管理之——dpkg与apt-*详解

    inux软件安装管理之--dpkg与apt-*详解 Nosee123关注 0.5922017.09.12 17:47:44字数 3,894阅读 8,565 [Linux软件安装管理系列]- - 传送门 ...

  4. [转载]屏幕PPI、分辨率到底需要多大才能满足?

    屏幕PPI.分辨率到底需要多大才能满足? 郝蛋儿 江湖骗子 13 人赞同了该文章 最近想买一个43寸的电视,720P和1080P差了500大洋.我不禁纠结了起来.看网上争得面红耳赤,有的人说不如108 ...

  5. DOCKER学习_011:使用Dockerfile制作docker镜像

    前面使用commit的方式,制作一个docker镜像,本次介绍使用Dockerfile制作一个dockers镜像 [root@docker-server3 ~]# mkdir /openssh [ro ...

  6. SpringMVC MVC 架构模式

    MVC 架构模式 MVC(Model.View 和 Controller)是一种架构模式,它是按照职责划分的思想将系统操作分为三个模块进行处理,每个模块负责一个职责,而且模块之间可以相互交互通信,共同 ...

  7. Centos7 离线安装python3 Django

    安装python 1..下载Python3源码包 下载地址:www.python.org/ftp/python/ 2.安装python前的库环境 yum install gcc patch libff ...

  8. Nginx下配置Https 配置文件(vue)

    #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #erro ...

  9. QCon笔记~《天下武功,唯快不破——面向云原生应用的Java冷启动加速技术》

    上周去听了QCon全球开发大会,其中有几场印象比较深刻的分享,除去几个比较概念化的话题,在Java技术演进这个Topic里的几个分享都是比较有干货的(但感觉工作中用不到) 首先是关于林子熠老师分享的冷 ...

  10. 07.ElementUI 2.X 源码学习:源码剖析之工程化(二)

    0x.00 前言 项目工程化系列文章链接如下,推荐按照顺序阅读文章 . 1️⃣ 源码剖析之工程化(一):项目概览.package.json.npm script 2️⃣ 源码剖析之工程化(二):项目构 ...