【JavaScript】内置对象 - 字符串对象 ④ ( 根据索引位置返回字符串中的字符 | 代码示例 )

news2024/11/26 14:51:52

文章目录

  • 一、根据索引位置返回字符串中的字符
    • 1、charAt 函数获取字符
    • 2、charCodeAt 函数获取字符 ASCII 码
    • 3、数组下标获取字符


String 字符串对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String





一、根据索引位置返回字符串中的字符



根据索引位置返回字符 : 给定一个 字符串 中的索引值 , 获取 字符串 中的该 索引的对应字符 ;

  • charAt(index) 函数 : 获取 index 索引对应的 字符 ;
  • charCodeAt(index) 函数 : 获取 index 索引对应的 字符的 ASCII 码 ;
  • str[index] : 直接使用数组下标的方式获取对应 下标索引 对应的 字符 ;

1、charAt 函数获取字符


charAt() 函数 是 String 字符串对象的方法 , 用于返回在指定位置的字符 ;

参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/charAt


charAt 函数原型如下 :

charAt(index)
  • index 参数 : 字符串中的索引值 , 从 0 开始计数 , 如果传入的类型不是 number 类型 , 会被转换为 number 整数 , 如果是 undefined 类型则转换为 0 ;
  • 返回值 : 返回 index 索引位置的 字符 ;
  • index 参数的取值范围是 0 ~ str.length - 1 , 如果索引值不合法 , 则返回空字符串 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 创建字符串
        var str = 'Hello World';

        // 获取 0 索引字符
        console.log(str.charAt(0));

        // 获取 100 索引字符 , 返回空字符串
        console.log(str.charAt(100));

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

    </script>
</head>

<body>
</body>

</html>

执行效果 :
在这里插入图片描述


2、charCodeAt 函数获取字符 ASCII 码


charCodeAt 函数 用于 获取 字符串中 指定索引位置的 字符 ASCII 码 , 函数原型如下 :

charCodeAt(index)
  • index 参数 : 字符串中的索引值 , 从 0 开始计数 , 如果传入的类型不是 number 类型 , 会被转换为 number 整数 , 如果是 undefined 类型则转换为 0 ;
  • 返回值 : 返回 index 索引位置的 字符的 ASCII 码 ;
  • index 参数的取值范围是 0 ~ str.length - 1 , 如果索引值不合法 , 则返回 NaN 值 ;

字符 与 ASCII 码对照表 :

在这里插入图片描述


代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 创建字符串
        var str = 'Hello World';

        // 获取 0 索引字符
        console.log(str.charCodeAt(0));

        // 获取 100 索引字符 , 返回空字符串
        console.log(str.charCodeAt(100));

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

    </script>
</head>

<body>
</body>

</html>

执行结果 :

在这里插入图片描述


3、数组下标获取字符


使用数组下标的方式 , 可以获取指定索引的字符 , 其效果与 charAt 函数相同 ;

如果设置的数组下标 index 值不在 0 ~ str.length - 1 范围内 , 则获取的值为 undefined 未定义值 ;


代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 创建字符串
        var str = 'Hello World';

        // 获取 0 索引字符
        console.log(str[0]);

        // 获取 100 索引字符 , 返回空字符串
        console.log(str[100]);

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

    </script>
</head>

<body>
</body>

</html>

执行效果 :

在这里插入图片描述

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

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

相关文章

Oracle的优化器

sql优化第一步&#xff1a;搞懂Oracle中的SQL的执行过程 从图中我们可以看出SQL语句在Oracle中经历了以下的几个步骤&#xff1a; 语法检查&#xff1a;检查SQL拼写是否正确&#xff0c;如果不正确&#xff0c;Oracle会报语法错误。 语义检查&#xff1a;检查SQL中的访问对象…

语法分析!!!

一、实验题目 根据给定文法编写调试预测分析程序&#xff0c;对任意输入串用预测分析法进行语法分析。 二、实验目的 加深对预测分析法的理解。 三、实验内容 四、实验代码 #include <iostream> #include <stdio.h> #include <string> #include <…

鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的

本文首发于公众号“AntDream”&#xff0c;欢迎微信搜索“AntDream”或扫描文章底部二维码关注&#xff0c;和我一起每天进步一点点 引言 当今信息技术领域日新月异&#xff0c;各种新技术和新平台层出不穷。鸿蒙&#xff08;HarmonyOS&#xff09;、Flutter、以及车载应用开发…

Cell-在十字花科植物中年生和多次开花多年生开花行为的互相转化-文献精读21

Reciprocal conversion between annual and polycarpic perennial flowering behavior in the Brassicaceae 在十字花科植物中年生和多次开花多年生开花行为的互相转化 亮点 喜马拉雅须弥芥 和 内华达糖芥 是两个多年生植物模型 MADS-box 基因的剂量效应决定了一年生、二年生…

树莓派4B 零起点(一) 树莓派 无屏 从购买到启动

目录 背景 一. 准备工作 二、烧录系统 三、连接系统 背景 准备开发ROS机器人&#xff0c;在淘宝上购买的树莓派4B(4G)到货了&#xff0c;配件都很齐全&#xff0c;那么就直接开箱验货。 一. 准备工作 1 、硬件&#xff1a;(如下图) (我的购买链接: 树莓派4B 4g 套件) 2…

信号:干扰类别及特征提取(二)

目录 第二部分&#xff1a;特征提取 一&#xff1a;瞬时特征参数 1.零中心归一化瞬时幅度之谱密度的最大值 2.非弱信号段零中心归一化瞬时幅度的标准偏差 3.零中心归一化瞬时幅度绝对值的标准偏差 4.零中心归一化非弱信号段瞬时频率的标准偏差 5.零中心归一化非弱信号段…

OpenCV学习 基础图像操作(十七):泛洪与分水岭算法

原理 泛洪填充算法和分水岭算法是图像处理中的两种重要算法&#xff0c;主要用于区域分割&#xff0c;但它们的原理和应用场景有所不同&#xff0c;但是他们的基础思想都是基于区域迭代实现的区域之间的划分。 泛洪算法 泛洪填充算法&#xff08;Flood Fill&#xff09;是一…

【Autopilot】没有自动添加本地管理员的问题处理

【问题】某公司选用了D记的笔记本电脑&#xff0c;约定出厂就预配置好Autopilot&#xff0c;当时向D记提供了三个信息&#xff1a; 1. M365的租户ID 2. 公司域名信息 3. Group Tag (某公司为跨国公司&#xff0c;通过Group Tag来区分国家&#xff0c;比如CHN-中国&#xff0c;L…

【模拟-BM99 顺时针旋转矩阵】

题目 BM99 顺时针旋转矩阵 描述 有一个NxN整数矩阵&#xff0c;请编写一个算法&#xff0c;将矩阵顺时针旋转90度。 给定一个NxN的矩阵&#xff0c;和矩阵的阶数N,请返回旋转后的NxN矩阵。 分析 模拟&#xff0c;写几个样例&#xff0c;分析一下新矩阵元素下标与原矩阵元素…

前端工程化:基于Vue.js 3.0的设计与实践

这里写目录标题 《前端工程化&#xff1a;基于Vue.js 3.0的设计与实践》书籍引言本书概述主要内容作者简介为什么选择这本书&#xff1f;结语 《前端工程化&#xff1a;基于Vue.js 3.0的设计与实践》书籍 够买连接—>https://item.jd.com/13952512.html 引言 在前端技术日…

17、matlab实现均值滤波、中值滤波、Butterworth滤波和线性相位FIR滤波

1、创建信号 1&#xff09;创建正余弦信号、噪声信号和混合信号 原始正余弦信号公式&#xff1a;Signal1 sin(2*pi*20* t) sin(2*pi*40* t) sin(2*pi*60* t) 高斯分布的白噪声&#xff1a;NoiseGauss [randn(1,2000)] 均匀分布的白噪声&#xff1a;[rand(1,2000)] 正余弦…

k8s学习--kubernetes服务自动伸缩之水平收缩(pod副本收缩)HPA详细解释与案例应用

文章目录 前言HPA简介简单理解详细解释HPA 的工作原理监控系统负载模式HPA 的优势使用 HPA 的注意事项应用类型 应用环境1.metircs-server部署2.HPA演示示例&#xff08;1&#xff09;部署一个服务&#xff08;2&#xff09;创建HPA对象&#xff08;3&#xff09;执行压测 前言…

278 基于Matlab GUI的中重频PD雷达仿真系统

基于Matlab GUI的中重频PD雷达仿真系统。具有26页文档报告。仿真雷达信号的发射、传播、散射、接收、滤波、信号处理、数据处理的全部物理过程&#xff0c;因此应当实现对雷达发射机、天线、接收机、回波信号处理、数据处理的建模与仿真。程序已调通&#xff0c;可直接运行。 2…

自定义类型:结构体+结构体内存对齐+结构体实现位段

结构体内存对齐实现位段 一.结构体1.结构体的声明2.结构体变量成员访问操作符3.结构体传参4.匿名结构体5.结构的自引用 二.结构体内存对齐1.对齐规则2.为什么存在内存对齐&#xff1f;3.修改默认对齐数 三.结构体实现位段1.什么是位段2.位段的内存分配3.位段的跨平台问题4.位段…

使用Qt实现文本文件的读写操作

文章目录 文本读写简介QFileDialog简介常用方法示例代码 QFile简介常用方法示例代码 QTextStream简介常用方法示例代码 结合使用示例完整示例代码(读写操作&#xff0c;可直接复制运行我使用的Qt版本为QT5.14)mainwindow.hmainwindow.cppmain.cpp代码解释 文本读写简介 在现代…

编译原理-词法分析(实验 C语言)

编译原理-词法分析 1. 实验目的 设计、编写并调试一个词法分析程序&#xff0c;加深对词法分析原理的理解 2. 实验要求 2.1 待分析的简单语言的词法 关键字&#xff1a;begin&#xff0c;if&#xff0c;then&#xff0c;while&#xff0c;do&#xff0c;end 所有关键字都是…

uc_os操作练习

目录 一、CubeMX配置 二、获取uc-os源码 三、代码移植 四、代码修改 五、总结 六、参考资料 一、CubeMX配置 首先进入CubeMX&#xff0c;&#xff0c;新建工程&#xff0c;选择STM32F103C8T6芯片&#xff0c;照例配置好RCC和SYS。 然后配置GPIO输出&#xff0c;这里选择P…

HarmonyOS(二十三)——HTTP请求实战一个可切换的头条列表

在前一篇文章&#xff0c;我们已经知道如何实现一个http请求的完整流程&#xff0c;今天就用官方列子实战一个简单的新闻列表。进一步掌握ArkTS的声明式开发范式&#xff0c;数据请求&#xff0c;常用系统组件以及touch事件的使用。 主要包含以下功能&#xff1a; 数据请求。…

matplotlib 动态显示梯度下降过程

文章目录 简介曲线下降曲面下降 简介 梯度下降是一种优化算法&#xff0c;常用于寻找函数的最小值或最大值。它通过迭代更新参数的方式逐步减小&#xff08;或增大&#xff09;目标函数的值&#xff0c;直到达到某个停止条件为止。梯度下降的基本思想是沿着目标函数的负梯度方…

BeagleBone Black入门总结

文章目录 参考连接重要路径系统镜像下载访问 BeagleBone 参考连接 镜像下载启动系统制作&#xff1a;SD卡烧录工具入门书籍推荐&#xff1a;BeagleBone cookbookBeagleBone概况&#xff1f; 重要路径 官方例程及脚本路径&#xff1a;/var/lib/cloud9 系统镜像下载 疑问&am…