<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 字符串基本认识 -->
<script>
console.log('-----字符串基本认识-----');
/*
JavaScript 字符串
字符串可以存储一系列字符，如 "John Doe"。
字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号：
*/
// 字符串实例
var carname = "Volvo XC60";
// 可以使用索引位置来访问字符串中的每个字符,且字符串的索引从 0 开始
var charActer = carname[3]; // charActer是 v
// 可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同:
var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';
// 你也可以在字符串添加转义字符来使用引号
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";
/*
特殊字符
在 JavaScript 中，字符串写在单引号或双引号中。所以下面内容无法解析：
"We are the so-called "Vikings" from the north."
字符串 "We are the so-called " 被截断。
如何解决以上的问题呢？可以使用反斜杠 (\) 来转义 "Vikings" 字符串中的双引号，如下:
"We are the so-called \"Vikings\" from the north."
反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：
转义字符 (\) 可以用于转义撇号，换行，引号，等其他特殊字符。
下表中列举了在字符串中可以使用转义字符转义的特殊字符：
代码 输出
\' 单引号
\" 双引号
\\ 反斜杠
\n 换行
\r 回车
\t tab(制表符)
\b 退格符
\f 换页符
*/
var a = "We are the so-called \"Vikings\" from the north.";
/*
字符串可以是对象
通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = "John"
但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String("John")
不过一般不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用
*/
var x = "John";
var y = new String("John");
console.log(typeof x, typeof y); // string object
</script>
<!-- 字符串属性与方法 -->
<script>
console.log('-----字符串基本认识-----');
/*
原始值字符串，如 "John", 没有属性和方法(因为他们不是对象)。
原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。
String 对象
String 对象用于处理文本（字符串）。
String 对象创建方法： new String()。
语法：
var txt = new String("string");
或者更简单方式：
var txt = "string";
*/
/*
字符串属性：
constructor 返回创建字符串属性的函数
length 返回字符串的长度
prototype 允许您向对象添加属性和方法,是全局属性，适用于所有的 Javascript 对象。
*/
var txt = "字符串属性：constructor";
console.log(txt.constructor); // function String()
console.log(txt.length); // 17
function employee(name, jobtitle, born) {
this.name = name;
this.jobtitle = jobtitle;
this.born = born;
}
var fred = new employee("Fred Flintstone", "Caveman", 1970);
employee.prototype.salary = null;
fred.salary = 20000;
console.log(fred.salary); // 20000
// 字符串方法：
// charAt() 返回指定位置的字符
var str = "hello world";
var n = str.charAt(str.length - 1);
console.log(n); // d
// concat() 连接两个或多个字符串，不改变原有字符串，返回新字符串
var str1 = "hello ";
var str2 = "world";
var n = str1.concat(str2);
console.log(n); // hello world
// fromCharCode() 将Unicode编码转为一个字符
var n = String.fromCharCode(72, 69, 76, 76, 79);
console.log(n); // HELLO
// indexOf(searchvalue,start) 返回某个指定的字符串值在字符串中start之后首次出现的位置，区分大小写，没有找到则返回-1
var str = "Hello! welcome to the universe. welcome to the world";
var n = str.indexOf("welcome", 10);
console.log(n); // 32
// lastIndexOf(searchvalue,start) 返回一个指定的字符串值最后出现的位置，如果指定第二个参数 start，则在一个字符串中的指定位置从后向前搜索。
var str = "1.eyes,2.eyes, 3.eyes";
var n = str.lastIndexOf("eyes", 15);
console.log(n); // 9
// includes(searchvalue, start) 查找字符串中是否包含指定的子字符串。
var str = "Hello world, welcome to the Runoob。";
var n = str.includes("world");
console.log(n); // true
var str = "Hello world, welcome to the Runoob.";
var n = str.includes("world", 9);
console.log(n); // false
// match() 在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
var str = "The rain in SPAIN stays mainly in the plain";
var n = str.match(/ain/gi);
console.log(n); // Array(4)["ain","AIN","ain","ain"]
// repeat() 字符串复制指定次数
var str = 'hello';
var n = str.repeat(3);
console.log(n); // hellohellohello
// replace() 在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
var str = "Mr Blue has a blue house and a blue car";
var n = str.replace(/blue/g, "red");
console.log(n); // Mr Blue has a red house and a red car
// search() 检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1
var str = "Mr. Blue has a blue house";
var n = str.search(/blue/i);
console.log(n); // 4
// split(separator,limit) 把一个字符串分割成字符串数组,如果设置了该参数，返回的子串不会多于这个参数指定的数组。
var str = "How are you doing today?";
var n = str.split(" ");
console.log(n); // Array(5) [ "How", "are", "you", "doing", "today?" ]
var str = "How is your son today?";
var n = str.split(" ", 3);
console.log(n); // Array(3) [ "How", "is", "your" ]
/*
slice(start,end) 提取字符串某个部分，并以新的字符串返回被提取的部分
start（包含） 和 end（不包含）
如果是负数表示从尾部截取多少个字符串，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
end 参数如果为负数，-1 指字符串的最后一个字符的位置，-2 指倒数第二个字符，以此类推。
*/
var str = "Hello world!";
var n = str.slice(1, 5);
console.log(n); // ello
var str = "Hello world!";
var n = str.slice(3);
console.log(n); // lo world!
var str = "Hello world!";
var n = str.slice(-1);
console.log(n); // !
var n2 = str.slice(-2);
console.log(n); // d!
// startsWith() 查看字符串是否以指定的子字符串开始
var str = "Hello world, welcome to the Runoob.";
var n = str.startsWith("Hello");
console.log(n); // true
// substr(start,length) 在字符串中抽取从 开始 下标开始的指定数目的字符。
var str = "Hello world!";
var n = str.substr(2, 3);
console.log(n); // llo
var n = str.substr(2); // llo world!
// substring(from, to) 用于提取字符串中介于两个指定下标之间的字符
var str = "Hello world!";
console.log(str.substring(3)); // lo world!
console.log(str.substring(3, 7)); // lo w
// toLowerCase() 把字符串转换成小写
var str = "Runoob";
console.log(str.toLowerCase()); // runoob
// toUpperCase() 把字符串转换成大写
var str = "Runoob";
console.log(str.toUpperCase()); // RUNOOB
// trim() 去除字符串的头尾空格
var str = " Runoob ";
console.log(str.trim()); // Runoob
// toString() 返回一个表示 String 对象的值。
var str = 123;
var res = str.toString();
console.log(typeof res); // string
// String HTML 包装方法
var txt = "Hello World!";
document.write("<p>字体变大: " + txt.big() + "</p>");
document.write("<p>字体缩小: " + txt.small() + "</p>");
document.write("<p>字体加粗: " + txt.bold() + "</p>");
document.write("<p>斜体: " + txt.italics() + "</p>");
document.write("<p>固定定位: " + txt.fixed() + "</p>");
document.write("<p>加删除线: " + txt.strike() + "</p>");
document.write("<p>字体颜色: " + txt.fontcolor("green") + "</p>");
document.write("<p>字体大小: " + txt.fontsize(6) + "</p>");
document.write("<p>下标: " + txt.sub() + "</p>");
document.write("<p>上标: " + txt.sup() + "</p>");
document.write("<p>链接: " + txt.link("http://www.w3cschool.cc") + "</p>");
document.write("<p>闪动文本: " + txt.blink() + " (不能用于IE,Chrome,或者Safari)</p>");
</script>
</body>
</html>
更多相关内容大家可以前往我的个人博客浏览：eyes++的个人空间
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
