WEB前端教程：操作字符串对象

接下来我们来学习有用的字符串方法，更加灵活的操作字符串

课程目标

熟悉 JavaScript 中字符串的基本知识。
掌握模板字符串以及如何向字符串中进行插值的方法
明白字符串这个对象，学会使用字符串的基本方法去处理字符串

字符串基础

在编码过程中，你可能不止会用到数字，更多地还会用到文本类型，字符串是语言的基本构建块。阅读

首先我们来学习如何创建字符串，如何连接多个字符串,掌握数字与字符串的相互转换

MDN 文本处理 — JavaScript 中的字符串(opens new window)

您已经知道可以使用双引号或单引号创建字符串，但是这些字符串不支持插值。模板字符串就能满足您这个需求,阅读下面文档学习如何给字符串中插值

编码

编码实现字符串连接,完成函数 concatString，实现两个字符串的连接。

/**
 * @param {string} firstStr
 * @param {string} lastStr
 */
function concatString(firstStr, lastStr) {
  // you code here
}

// 测试用例
console.log(concatString("Jennie", "Kim")); // "Jennie Kim"
console.log(concatString(" Congratulation！", "you are the winner")); // "Congratulation！，you are the winner"

运用字符串插值完成函数 sayHi，使其将参数变量名插入到字符串中"Hello, name"。

/**
 * @param {string} name
 */
function sayHi(name) {
  // you code here
}

//测试用例
console.log(sayHello("Amy")); // "Hello, Amy"

字符串方法

接下来我们来学习有用的字符串方法，更加灵活的操作字符串

请确保掌握了以下字符串方法/属性：

String.length | MDN (opens new window)获取字符串长度
String.toUpperCase() | MDN (opens new window)转换大写
String.toLowerCase() | MDN (opens new window)转换小写
String.indexOf() | MDN (opens new window)查找子串
String.includes() | MDN (opens new window)查找子串
String.slice() | MDN (opens new window)获取子串
String.substring() | MDN (opens new window)获取子串
String.trim() | MDN (opens new window)去除字符串首位空格
String.startsWith() | MDN (opens new window)字符串是否以指定字符串的字符开头
String.endsWith() | MDN (opens new window)字符串是否以指定字符串的字符结尾
String.split() | MDN (opens new window)把一个字符串分割成字符串数组
String.replace() | MDN (opens new window)在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。
String.replaceAll() | MDN (opens new window)在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串

字符串的方法非常丰富，您可以下面文档中学习您感兴趣的数组方法：

String 对象 | 网道(opens new window)

任务一

在计算机科学中，slug 是用于识别某个项目的字符串。通常，slug 用于搜索引擎优化和更好的用户体验的 URL，以易于阅读的形式标识网站上的特定页面。

比如如果您访问某个网站并导航到特定的网页或博客文章，则会看到浏览器的 URL 栏中的 URL 如下所示：

https://www.example.com/blog/this-is-a-blog-post

假设您有一篇博客名为："my first blog",如果我们直接在 URL 使用这个标题（例如，https://example.com/item/My first blog）是非常不有好的，因为它包含空格。通常我们我们会使用 slug.如下所示的：

my-first-blog

所以 URL 变为:

https://example.com/item/my-first-blog

完成函数 convertToSlug()，使其根据收到的文本返回 slug，遵循以下规则：

slug 不应超过 15 个字符。当超过 15 个字符时，忽略第 15 个字符之后的所有内容。
slug 应始终为小写。
空格字符应替换为破折号 (-)。

/**
 * @param {string} name
 */
const convertToSlug = (name) => {
  //your code here
};

// 测试用例
console.log(convertToSlug("to do list")); // "to-do-list"
console.log(convertToSlug("My SeCond BlOg")); // "my-second-blog"
console.log(convertToSlug("Grade inquiry of CET-4&6")); // "grade-inquiry-o"

任务二

现在您在开发一个记录用户饮水信息的 app，现在您需要处理获取的用户饮水数据 data。

const data = [
  "monday - 500ml",
  "mONday - 330",
  "monday - 150ml",
  "Tuesday - 100ml",
  "Tuesday - 330ml",
  "weDnesDay - 230",
  "TursDAy - 330ml",
  "Friday - 500",
  "Saturday - 100ml",
  "sunday - 250",
  "sunday - 100ml",
];

请你按照以下要求处理以上的字符串对象 data，
- 以上字符串开头中的星期字符串大小写混乱了，请你先统一格式化它们，确保星期为首字母大写，其余字母小写。比如 "Monday","Tuesday"
- 请您将字符串中符号（"-"）都替换为冒号（":"）
- 请您确保每一个字符串都是以单位 ml 结尾，有些字符串没有带毫升(ml)单位,请您添加上
实现某一天饮水信息检索功能。允许用户在搜索输入键入星期数来搜索数据 data 中某一天的饮水信息。
- 搜索应该不区分大小写（因此，输入 MONDAY，应自动过滤为 monday）。
- 此外，应该忽略搜索输入中的前导和尾随空格。
- 搜索 moday 应当返回所有包含 monday 的字符串,如下所示：

//返回结果
"monday - 500ml";
"monday - 330ml";
"monday - 150ml";

// TODO: 实现检索功能
/**
 * @param {string} day
 * @param {Array} data
 */
const query = (day, data) => {
  //your code here
};

// 测试用例
console.log(query(" Tuesday   ")); // ["Tuesday - 100ml","Tuesday - 330ml"]
console.log(query("Friday")); // ["Friday - 500ml"]

基于上一个任务检索出来的字符串结果，计算这一天的饮水总量，并且告知用户饮水是否达标。要求饮水 500ml 以上就算达标。
- 截取每一个字符串末尾数字内容（倒数第五位至倒数第三位）
- 计算数字总和（需要将字符串转换为数字类型）
- 如果饮水总量没有达到 500ml 就弹出信息您在星期 x 的饮水量没有达标！，否则就提示您在星期 x 的饮水量达标啦！

任务三

编码实现完成该函数 getCountTodos，使其返回接收到的 CSV 字符串中的待办事项数。

注意：CSV 表示逗号分隔值。这是是一个 CSV 字符串的示例："first item, second item".

/**
 * @param {string} todos
 */
const getCountTodos = (todos) => {
  return todos.split(",").length;
};

// 测试用例
console.log(getCountTodos("Laundry, Wash dishes, Clean table")); // 3
console.log(getCountTodos("Feed cat, Degrease bike chain")); // 2

编码实现字符串去重函数 removeRepetition

/*
去掉字符串str中，连续重复的地方
*/
function removeRepetition(str) {
    // do something
}

// 测试用例
console.log(removeRepetition("aaa")); // ->a
console.log(removeRepetition("abbba")); // ->aba
console.log(removeRepetition("aabbaabb")); // ->abab
console.log(removeRepetition("")); // ->
console.log(removeRepetition("abc")); // ->abc

编写函数 isPalindromicString 实现回文字符串的判断
回文字符串就是正读和反读都一样的字符串，比如madam

/**
* @@param {string} str
* @return {Boolean} 如果是返回 true，如果不是回文字符串 返回 false
*/
function isPalindromicString(str) {
    // do something
}

// 测试用例
console.log(isPalindromicString("aaa")); // ->true
console.log(isPalindromicString("madam")); // ->true
console.log(isPalindromicString("hello")); // ->false

任务四

编码实现凯撒加密算法，根据输入的偏移量，实现对字符串的加密和解密.

恺撒加密（Caesar cipher），是一种最简单且最广为人知的替换加密技术。明文中的所有字母都在字母表上向后（或向前）按照一个固定数目进行偏移后被替换成密文。

例如，当偏移量是 3 的时候，所有的字母 A 将被替换成 D，B 变成 E，以此类推。

<div>
    <label>偏移:</label><input type="text" name="offset" size=5 value=3><br>
    <label>明文:<label></label><input type="text" name="plain" size=50 value="This is a test."><br>
    <label>密文:</label><input type="text" name="enc" size=50><br>
    <input type="button" value="加密" onClick="encrypt()">&nbsp;
    <input type="button" value="解密" onClick="decrypt()">
</div>

/**
 * @description 字符串加密
 * @param {number} offset偏移量
 * @param {string} str 需要加密的字符串
 * @return {string} 返回加密字符串
 */
function encrypt(offset,str){
    //这里实现加密算法
}

/**
 * @description 字符串解密
 * @param {number} offset 偏移量
 * @param {string} str
 * @return {string} 返回加密字符串
 */
function decrypt(offset,str){
    //这里实现解密算法
}

需求说明

点击加密按钮，根据用户输入的偏移量，对明文进行加密，加密后的为密文，显示在密文输入框中
点击解密按钮，根据用户输入的偏移量，对密文进行加密，解密出来的为明文，显示在明文输入框中
基础好的同学还可以试着用 JS 实现 base64 的编码和解码

任务五

参照打字机效果 DEMO (opens new window)，实现一个打字机效果生成器

<label>请输入文本:</label><input  type="text"/>
<button onclick="generateTypeEffect()">生成打字效果</button>
<h2 id="showText"></h2>

function generateTypeEffect () {
   //这里实现打字机效果
   //将内容显示在h2中
}

需求说明

在输入框中输入需要实现打字机效果的文本
实现原理使用定时器间隔一段时间递增地截取字符串的长度
点击 button 实现打字机效果的生成，将文本输出到 id 为 showText 的标签中

JavaScript 的大数问题

阅读

阅读 JavaScript 的大数问题 (opens new window),然后利用 JS 字符串实现一个字符串相加。

任务一

用户输入 num1，num2 两个字符串，计算它们的和，并且结果也以以字符串返回

<label>请输入num1：</label><input type="text" ><br>
<label>请输入num2：</label><input type="text" ><br>
<button>相加</button><br>
<label>结果:</label><input id="reslut" type="text" >

/**
 * @param {string} num1
 * @param {string} num2
 * @return {string} 返回 num1+num2
 **/
function largeNumAdd(num1, num2) {
    // 在这里实现大数相加函数

}

//测试用例
largeNumAdd("11", "123") ->"134"
largeNumAdd("235656","746433225") ->""746668881""
largeNumAdd("3456786543355","222222234567778") ->"225679021111133"

需求说明

点击相加按钮，将用户输入的两个字符串相加，计算结果显示在 id 为 result 的 p 标签中
添加判断，用户输入的 num1 和 num2 都只能包含数字 0-9,并且不能以 0 开头,
你的实现过程不能依赖其他的 JavaScript 库 ,也不能直接将输入的字符串转换为整数形式。

任务二

基于上面的任务，再实现字符串相乘,它们的乘积也表示为字符串形式。

<label>请输入num1：</label><input type="text" ><br>
<label>请输入num2：</label><input type="text" ><br>
<button>相加</button><br>
<button>相乘</button><br>
<label>结果:</label><input id="reslut" type="text" >

/**
 * @param {string} num1
 * @param {string} num2
 * @return {string}
 */
function multiply(num1, num2) {
    //这里编写字符串相乘代码
};
//测试用例
multiply("23""4") ->"92"
multiply("235""263645") ->"61956575"
multiply("2453465476867978""4756867978080890909") ->"11670811362240247334432453213412002"

需求说明

点击相乘按钮，将用户输入的两个字符串相乘，计算结果显示在 id 为 result 的 p 标签中
添加判断，用户输入的 num1 和 num2 都只能包含数字 0-9,并且不能以 0 开头,
你的实现过程不能依赖其他的 JavaScript 库 ,也不能直接将输入的字符串转换为整数形式。

提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

总结

依然把今天的学习用时，收获，问题进行记录。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-22 11:38
阅读 ( 525 )
分类：WEB前端开发