切割 字符串_web前端如何使用字符串

46711eca975b7f7328acb84e8bd7f0f3.png

一、字符串概述

定义:字符串就是用单引号或者双引号包裹起来的,零个或多个排列在一起的字符。

例如:’javascript‘, “”, “345” , ’9-11a$‘, “xiao_yuanLian”

嵌套:字符串可以嵌套。

在单引号包裹的字符串内部,应该使用双引号进行嵌套。

在双引号包裹的字符串内部,应该使用单引号进行嵌套。

例如:“I am ‘coolMan’”, ’are u “kidding” me’

fe4414a7ffb143ef6920927a15cb025c.png

8c08ef9dcf79471a9a3459d9982fdabf.png

二、字符串的使用

2.1 字符串换行

var x =
"Hello World!";

var x = "Hello
World!";

字符串断行需要使用反斜杠()

var x = "Hello
World!";

2.2 length属性

Length:返回的是字符串的长度

55c0632608a20b7fd26e7c5878212615.png

351c520777e2588137248eaefa5e3da3.png

2.3 字符索引

[ ]方法:在字符串后面接中括号,中括号中写数字。能够访问到字符串中的每个字符。

ps:索引一次只能索引一个字符,如果需要多个则需要用+连接符。

pss:索引从0开始,0表示第一个字符。

df1e496447afeb5c662700d911f33564.png

e075296416c5eee563b488dbaf5742bb.png

2.4 获取指定位置字符

1.charAt(index):返回的是具体的字符

Index:就是字符串的位置(它是一个数字)

f7a650c768195df624178d9b9a0b83f9.png

2.charCodeAt(index)返回的是字符对应的Unicode编码(ascii编码值)

A:65 a:97 0:48

Index:就是字符串的位置(它是一个数字)

de9ec32854c88dd3840c5426eab4ab69.png

1006129455c1ecc69979e6368e34c4fc.png

索引从0开始

字符编码需要记得的两个。A—65,a—97。其他符号累加即可。

fromCharCode将指定的数字(ascii码值)转为对应的字符

9d948f3dde4caa36f111b97d877f2fc8.png

2.5 字符串连接

concat()方法能够将两个字符串拼接起来,合成一个新的字符串。

可以认为concat和+作用相同。至少在现阶段我们可以认为他们是没有区别的

fbb0b174723304bfea7aff201163e991.png

8416232d3571a89e4e8d910bcce26ba4.png

2.6模板字符串

模板字符串(template string)是增强版的字符串,用反引号(`)标识。

模板字符串中嵌入变量,需要将变量名写在${}之中。

三、转义字符

3.1常见转义字符

' 单引号

" 双引号

反斜杠

n 换行

r 光标到首行

t tab(制表符)

f0ce14a517ac1c40486d90db3f875ff1.png

98814a05467b10cb4b5c5a1f8ab461ef.png

四、字符串对象

4.1 String字符串对象

javascript中有字符串类型string类型,我们也知道这种基本类型的变量的创建方式。

但javascript中还提供了另外一种字符串的声明方式,这种方式叫字符串对象。使用 new 关键字将字符串定义为一个对象

New String();

ee955f9becd2b47e69e26399eec48241.png

4.2 字面量对象的简单使用

五、字符串方法(重点)

5.1 字符串方法

(2).charAt(number):返回当前指定位置的字符

(3).charCodeAt(number):返回当前指定位置的字符ascii码值

(4).concat:连接字符串

(5).substring(start,end):截取字符串(从哪里开始到哪里结束,end: 不包含end))

(6).substr(start,length):截取字符串(从哪里开始取多长的字符)

(7).slice(start,end):截取字符串(end:不包含end)

e02261881047d1a5dbb905184be0122c.png
  1. .indexOf(str,offst):返回当前查找字符串在整个字符串中的首次位置,如果没有返回-1

Str:字符串

Offset:从哪里开始查找

2..lastIndexOf:倒过来查找

bfbdbba225bd9d39e5c7399cda08c899.png

3..trim():去掉字符串两端的空格

cc6ffc797a7ce70dbf0cfdbbd88c6d39.png

4..toUpperCase和toLowerCase:大小写转换

1f300ccdab49d209fef1b67c612cae9f.png

.match:返回一个指定字符串的数组

a8aa6d67a8c702c221a3a44533cbdf90.png

.search:返回位置

.replace:替换字符串

183aa91d3164ed7ff65eff57bf0d8f1e.png

.split:字符串切割,返回数组

85a87adcabb94ae3f5b64bfbd2477da0.png

Es6新增的方法

  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
  • 这三个方法都支持第二个参数,表示开始搜索的位置。
  • repeat方法返回一个新字符串,表示将原字符串重复n次。

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。

padStart()和padEnd()一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串。

5.2 字符串Base64编码

Base64本身是一种加密方式,可以将任意字符转成可打印字符。

有时需要以文本格式传递二进制数据,那么也可以使用 Base64 编码。

而我们使用这种编码方法,主要不是为了加密,而是为了不出现特殊字符,简化程序的处理。

javascript中字符串提供了两个有关Base64编码的方法:

btoa():字符串或二进制值转为Base64编码

atob():Base64编码转为原来的编码

500be93910e74f9ecb287b8325457894.png

encodeURIComponent():要将非 ASCII 码字符转为 Base64 编码

decodeURIComponent():将转码后的内容转为非ASCII内容

afd81c2db70b3e583dcf5da2e027ea70.png

作业1:统计字符串中字母出现的次数

“ababcdeeeffhhljlkom”,统计这个字符串中每个字母出现的次数。

利用字符串的函数:

charCodeAt(i):返回指定位置的字符的ascii码值 a:97,A:65

fromCharCode(97,98,99):返回指定ascii码值的所指定的字符

charAt():返回指定位置的字符

第一种方法:

0ab83d1f7bbaa27ce23254b896f81585.png

1d2818b98352a3ce2ab56a546d943eb3.png

方法2:创建一个新的字符串,这个新的字符串是不重复的每个字符,然后和老的字符串中有重复的字符进行比较,如果相等就累加。

indexOf():查找子字符串在整个字符串中首次出现的位置。(从前往后)

lastIndexOf():查找子字符串在整个字符串中最后一次出现的位置。(从后往前)

7e1b789e3dd8b89561a53b33c93be32b.png

038c6a08437d1f3fcac776f752a44d87.png

2c7ef88eea81e2725182c2f1dc8f2d95.png

方法3:利用对象的方式进行字符串的累加

e53ab374ec719f6720e85ba45e69b110.png

66039afc06125290c2e17387b4260764.png

Try-catch语句的使用

六、字符串实例

6.1定时器的简单使用

setInterval():定时器,

按照指定的时间,重复的执行函数表达式

setInterval(function(){},毫秒数)

6.2 实例:打字机效果(动画)

c2f384d4682517c805adfd5b30f6a5b2.png

setTimeout():延时器

Canvans画布

方法1:通过substring()或者substr()或者是slice()这三个函数截取字符串

094ca5b75160922e5868b360eb0b0c9d.png

a99cddb849d8413d3b3c525bd631ff06.png

方法2:通过数组的方式来访问字符串中字符

0eee76c396eb7a95df37e069dc6932a1.png

1520e8aed439b18cf2a3da6502122131.png

6.3 实例:幸运数字(0-10000),800

948b042038d1acaec88c261ce5a9ea83.png

4a55b39946d6263a557bdd60a748a816.png

cfa1110b33e3c82c9024c895fa226c15.png

6.4 实例:金字塔

Str = “abcdefg”;

A

Ab

Abc

Abcd

05ec55c68ad9ca4ead487deb6562b600.png

52ba0d6aa3787b07e55ee32a18b9b1d9.png

6.5 实例:抽奖效果(动画)

分析一下:How to create your code?

setInterval():

奖品存放在数组中,随机抽奖(Math.random())

将结果存放到文本框中

1369fb1f613a2fcd660fc72a2fe8bb97.png

4a440e1cce6840ad8c78d355afd3ed23.png

cb01648d77b70a80abed7b6c20c2f64a.png

699f603546ed6805a6f957873f10c3c0.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/558596.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis 缓存实战——缓存、数据库一致性问题分析与解决方案

引言 缓存与数据库一致性的问题自从出现了缓存概念后就一直被提及,它是一个缓存方案的先天缺陷,只要存在缓存,就势必会讨论缓存与数据库一致性的问题。 一致性问题还广泛存在于各种分布式存储场景中,如主从一致性等等。 本篇博…

Java 多线程 —— AQS 详解

引言 AQS 是AbstractQuenedSynchronizer 的缩写,抽象的队列式同步器,它是除了java自带的synchronized关键字之外的锁机制。是 JUC 下的重要组件。 相关产物有:ReentrantLock、CountDownLatch、Semaphore、ReadWriteLock等。 一、AQS的设计…

的主机名_如何在Mac 上更改电脑的名称或本地局域网主机名?

我们知道,一台电脑有其设定的具体名称,电脑的名称和本地主机名用于在本地网络上识别您的电脑。当我们需要自定义电脑名称或本地局域网主机名时,则需要对其进行更改。那我们该如何更改呢?有需要的小伙伴们快和小编一起来看看吧~更改…

dev控件swiftplot图滚动方法_无限轮播图使用Scroller就这么简单

前言这几天又拾起老本行,复习复习Android,才发现忘的差不多了,上午做了一个小Demo,配合Scroller做了一个轮播图,效果如下,但是不知为何,录制的GIF成这样,凑乎一下看看。原理是继承Vi…

JVM——CPU缓存架构与Java 内存模型

导航一、CPU缓存架构与一致性协议1.1 CPU缓存架构1.2 缓存行与伪共享问题1.3 MESI 缓存一致性协议1.4 伪共享的解决办法二、JMM Java 内存模型2.1 JMM 简介2.2 原子性、可见性、有序性2.3 八大内存交互操作2.4 happens-before 原则一、CPU缓存架构与一致性协议 1.1 CPU缓存架构…

白噪声检测_科学家尝试用智能扬声器的白噪声来监测婴儿的呼吸运动

华盛顿大学的一支研究团队,刚刚介绍了他们开发的一种新型智能扬声器技术。这种设备能够借助白噪声来安抚熟睡的婴儿,并监测他们的呼吸和运动。具体说来是,通过智能扬声器发出的白噪声,原型设备能够将之与生命体征监测仪的数据相匹…

最大值_285期 博最大值2路,已经箭在弦上!

往期数据P-5掉码 跨度 和尾 012断路 余数和 位数86072 1 8 4 200 断1路2 5 对214对 双双双79703 0 2 3 101 断2路2 4 对215对 单单单62386 0 4 1 020 断1路2 4 错216对 双双单71903 0 8 7 110 断2路2 5 错217对 单单单64838 0 4 8 012 来3路3 4 错218对 双双双02052 0 2 2 020 …

商品领域ddd_为 Gopher 打造 DDD 系列:领域模型-资源库

前言: 作为领域模型中最重要的环节之一的Repository,其通过对外暴露接口屏蔽了内部的复杂性,又有其隐式写时复制的巧妙代码设计,完美的将DDD中的Repository的概念与代码相结合!Repository资源库通常标识一个存储的区域…

mysql5.7主从全备恢复_Mysql5.7—运维常用备份方式(超全)

小生博客:http://xsboke.blog.51cto.com小生 Q Q:1770058260-------谢谢您的参考,如有疑问,欢迎交流一、 Mysqldump备份结合binlog日志恢复使用mysqldump进行全库备份,并使用binlog日志备份,还原时&#xf…

docker 运行容器_Docker之运行 Django 容器

首先此篇笔记默认你已经安装好了 Docker,并了解 Docker 的基础概念,诸如镜像、容器、以及他们之间的关系等。如果不太了解,等我回头了解清楚以后,可以再写一篇文章阐述一下。(狗头当然,对于这篇文章&#x…

mysql8.0与mysql7.0_MySQL 5.7 vs 8.0,哪个性能更牛?

测试mysql5.7和mysql8.0分别在读写,选定,只写模式下不同并发时的性能(tps,qps)最早测试使用版本为mysql5.7.22和mysql8.0.15sysbench测试前先重启mysql服务,并清除os的缓存(避免多次测试时命中缓存)每次进行测试都是新生成测试数据…

springmvc使用requestmapping无法访问控制类_研究人员称人类使用的新烟碱类杀虫剂让蜜蜂无法入睡...

来自布里斯托尔大学的科学家进行了研究,显示常见的杀虫剂可以阻止蜜蜂和苍蝇睡个好觉。就像人类一样,许多昆虫也需要睡眠才能正常工作。然而,如果它们接触过新烟碱类杀虫剂,它们的睡眠就会受到影响,新烟碱类杀虫剂是一…

linux 监控mysql脚本_Linux系统MySQL主从同步监控shell脚本

操作系统:CentOS系统目的:定时监控MySQL数据库主从是否同步,如果不同步,记录故障时间,并执行命令使主从恢复同步状态1、创建脚本文件vi /home/crontab/check_mysql_slave.sh #编辑,添加下面代码#!/bin/sh…

python协成_Python协程(上)

几个概念:event_loop 事件循环:程序开启一个无限的循环,程序员会把一些函数注册到事件循环上。当满足事件发生的时候,调用相应的协程函数。coroutine 协程:协程对象,指一个使用async关键字定义的函数&#…

js父元素获取子元素img_css,前端_父标签div中包含一个子元素img标签,子元素div标签,为什么img要加上浮动,子元素div才会处于正常位置?,css,前端 - phpStudy...

父标签div中包含一个子元素img标签,子元素div标签,为什么img要加上浮动,子元素div才会处于正常位置?dom结构如图img加上float 子元素div显示正常。不加float div显示错位。附上我写的一个dome测试用的,大家可本地看下究…

android运营商获取本机号码_一键登录已成大势所趋,Android端操作指南来啦!

根据极光(Aurora Mobile)发布的《2019年Q2移动互联网行业数据研究报告》,2019年第二季度,移动网民人均安装APP总量已达56款。面对如此繁多的APP,想在用户的手机中占据一席之地,移动开发者们就不得不努力提升用户体验。而现实却是&…

spring批量写入mysql数据库_MyBatis-spring和spring JDBC批量插入Mysql的效率比较

工具框架用spring-batch,数据库是mysql(未做特殊优化)。比较数据框架mybatis和spring jdbc的插入效率。Mybatis三种实现:1、mybatis的官方写法Java代码publicvoidbatchInsert1(List poilist)throwsException {SqlSession sqlSession sqlSessionFactory.…

金额转换java_java金额转换

像商品价格,订单,结算都会涉及到一些金额的问题,为了避免精度丢失通常会做一些处理,常规的系统中金额一般精确到小数点后两位,也就是分;这样数据库在设计的时候金额就直接存储整型数据类型,前端…

java bloomfilter_爬虫技术之——bloom filter(含java代码)

在爬虫系统中,在内存中维护着两个关于URL的队列,ToDo队列和Visited队列,ToDo队列存放的是爬虫从已经爬取的网页中解析出来的即将爬取的URL,但是网页是互联的,很可能解析出来的URL是已经爬取到的,因此需要VI…

java php js_【javascript/PHP】当一个JavaScripter初次进入PHP的世界,他将看到这样的风景...

本文将从以下11点介绍javascript和PHP在基础语法和基本操作上的异同:1.数据类型的异同2.常量和变量的定义的不同,字符串连接运算符不同3.对象的创建方法的不同4.PHP与JS在变量声明提升和函数声明提升的差异5.var在JS和PHP中使用的差异6.PHP和JS在访问对象…