CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>有用的字符串方法 - 学习 Web 开发 | MDN</title><link rel="alternate" title="Useful string methods" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods" hrefLang="en"/><link rel="alternate" title="Nützliche String-Methoden" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Scripting/Useful_string_methods" hrefLang="de"/><link rel="alternate" title="Métodos útiles con cadenas" href="https://developer.mozilla.org/es/docs/Learn_web_development/Core/Scripting/Useful_string_methods" hrefLang="es"/><link rel="alternate" title="Méthodes utiles pour les chaînes de caractères" href="https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Scripting/Useful_string_methods" hrefLang="fr"/><link rel="alternate" title="便利な文字列メソッド" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Scripting/Useful_string_methods" hrefLang="ja"/><link rel="alternate" title="문자열 제대로 다루기" href="https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Scripting/Useful_string_methods" hrefLang="ko"/><link rel="alternate" title="Métodos úteis de string" href="https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Core/Scripting/Useful_string_methods" hrefLang="pt"/><link rel="alternate" title="Полезные методы для строк" href="https://developer.mozilla.org/ru/docs/Learn_web_development/Core/Scripting/Useful_string_methods" hrefLang="ru"/><link rel="alternate" title="有用的字符串方法" href="https://developer.mozilla.org/zh-TW/docs/Learn_web_development/Core/Scripting/Useful_string_methods" hrefLang="zh-Hant"/><link rel="alternate" title="有用的字符串方法" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods" hrefLang="zh"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="现在我们学习基本的字符串语法，让我们开始思考一下我们可以对内置方法的字符串做什么有用的操作，例如查找文本字符串的长度，加入和分割字符串，将字符串中的一个字符替换为另一个字符。"/><meta property="og:url" content="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods"/><meta property="og:title" content="有用的字符串方法 - 学习 Web 开发 | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="zh_CN"/><meta property="og:description" content="现在我们学习基本的字符串语法，让我们开始思考一下我们可以对内置方法的字符串做什么有用的操作，例如查找文本字符串的长度，加入和分割字符串，将字符串中的一个字符替换为另一个字符。"/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.8413e54d.js"></script><link href="/static/css/main.3d9e7a02.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-javascript document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/zh-CN/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/zh-CN/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/zh-CN/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/zh-CN/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/zh-CN/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/zh-CN/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/zh-CN/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/zh-CN/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class=" "><a href="/zh-CN/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Build web projects usable for all</p></div></a></li><li class="apis-link-container desktop-only "><a href="/zh-CN/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container active"><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/zh-CN/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/zh-CN/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/zh-CN/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/zh-CN/docs/Learn_web_development/Core/Scripting" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/zh-CN/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/zh-CN/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/zh-CN/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/zh-CN/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/zh-CN/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/zh-CN/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fzh-CN%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FUseful_string_methods" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fzh-CN%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FUseful_string_methods" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn_web_development" class="breadcrumb" property="item" typeof="WebPage"><span property="name">学习 Web 开发</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Learn_web_development/Core" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Core learning modules</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn_web_development/Core/Scripting" class="breadcrumb" property="item" typeof="WebPage"><span property="name">创建 JavaScript 代码块</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">有用的字符串方法</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>中文 (简体)</span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="de" href="/de/docs/Learn_web_development/Core/Scripting/Useful_string_methods" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li><li class=" "><a data-locale="es" href="/es/docs/Learn_web_development/Core/Scripting/Useful_string_methods" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Learn_web_development/Core/Scripting/Useful_string_methods" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Learn_web_development/Core/Scripting/Useful_string_methods" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Learn_web_development/Core/Scripting/Useful_string_methods" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="pt-BR" href="/pt-BR/docs/Learn_web_development/Core/Scripting/Useful_string_methods" class="button submenu-item"><span>Português (do Brasil)</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Learn_web_development/Core/Scripting/Useful_string_methods" class="button submenu-item"><span>Русский</span></a></li><li class=" "><a data-locale="zh-TW" href="/zh-TW/docs/Learn_web_development/Core/Scripting/Useful_string_methods" class="button submenu-item"><span>正體中文 (繁體)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard localized-content-note"><p><a href="/zh-CN/docs/MDN/Community/Contributing/Translated_content#活跃语言">此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">在本文中</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#把字符串当作对象">把字符串当作对象</a></li><li class="document-toc-item "><a class="document-toc-link" href="#主动学习的示例">主动学习的示例</a></li><li class="document-toc-item "><a class="document-toc-link" href="#结论">结论</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/zh-CN/docs/Learn_web_development/Getting_started">入门模块</a></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup">配置环境</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">安装基础软件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web">浏览互联网</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors" class="only-in-en-us">Code editors</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">处理文件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">命令行速成课</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website">你的第一个网站</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like">你的网站会是什么样子？</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">HTML 基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">CSS 基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">JavaScript 基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website">发布你的网站</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Getting_started/Web_standards" class="only-in-en-us">Web 标准</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works">万维网是如何工作的</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model">Web 和 Web 标准</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites" class="only-in-en-us">How browsers load websites</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills" class="only-in-en-us">软性技能</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning" class="only-in-en-us">Research and learning</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork" class="only-in-en-us">Collaboration and teamwork</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes" class="only-in-en-us">Workflows and processes</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews" class="only-in-en-us">Succeeding in job interviews</a></li></ol></details></li><li class="section"><a href="/en-US/docs/Learn_web_development/Core" class="only-in-en-us">核心模块</a></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content">使用 HTML 构建内容</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">开始学习 HTML</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">“头”里有什么——HTML 元信息</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">HTML 文本处理基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">强调与重要性</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Lists" class="only-in-en-us">Lists</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">文档与网站架构</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">文本格式进阶</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Creating_links">创建超链接</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">标记信件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">构建网页内容</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML 中的图片</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">视频和音频内容</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Mozilla 欢迎页面</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">HTML 表格基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">HTML 表格进阶特性和无障碍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">作业：构建行星数据</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms" class="only-in-en-us">Forms and buttons in HTML</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">HTML 调试</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics">CSS 样式基础</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">CSS 如何运行</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Getting_started">让我们开始 CSS 的学习之旅</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">运用你的新知识</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">CSS 选择器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">属性选择器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">伪类和伪元素</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Combinators">关系选择器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model">盒模型</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">层叠、优先级与继承</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS 值和单位</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Sizing">在 CSS 中调整大小</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">背景与边框</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Overflow">溢出的内容</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">图像、媒体和表单元素</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Tables">样式化表格</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">调试 CSS</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">基本的 CSS 理解</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">创建精美的信纸</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">一个漂亮的盒子</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling">CSS 文本样式</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Fundamentals">基本文本和字体样式</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_lists">为列表添加样式</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_links">样式化链接</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Web_fonts">Web 字体</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">作业：排版社区大学首页</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout">CSS 排版</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Introduction">介绍 CSS 布局</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Floats">浮动</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Positioning">定位</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Flexbox">弹性盒子</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Grids">网格</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">响应式设计</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Media_queries">媒体查询入门指南</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">作业：基本布局理解</a></li></ol></details></li><li class="toggle"><details open=""><summary><a href="/zh-CN/docs/Learn_web_development/Core/Scripting">使用 JavaScript 动态编码</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/What_is_JavaScript">什么是 JavaScript？</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/A_first_splash">JavaScript 初体验</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/What_went_wrong">查找并解决 JavaScript 代码的错误</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Variables">如何存储你需要的信息——变量</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Math">JavaScript 中的基础数学 — 数字和操作符</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Strings">文本处理——JavaScript 中的字符串</a></li><li><em><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods" aria-current="page">有用的字符串方法</a></em></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays">数组</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Silly_story_generator">笑话生成器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals">在代码中做决定——条件语句</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Loops">循环吧，代码</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Functions">函数——可复用的代码块</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Build_your_own_function">创建你自己的函数</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Return_values">函数返回值</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Events">事件介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Event_bubbling">事件冒泡</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Image_gallery">图片库</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Object_basics">JavaScript 对象基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/DOM_scripting">DOM 脚本简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Network_requests">从服务器获取数据</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/JSON">使用 JSON</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript">处理常见的 JavaScript 问题</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript 架构和库</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Introduction">客户端框架介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Main_features">框架的主要特性</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started">React 入门</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning">开始我们的 React 待办清单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_components">组件化我们的 React App</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state" class="only-in-en-us">React interactivity: Events and state</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering" class="only-in-en-us">React interactivity: Editing, filtering, conditional rendering</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility" class="only-in-en-us">Accessibility in React</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_resources" class="only-in-en-us">React resources</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility">无障碍</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">什么是无障碍？</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/Tooling">解决常见的无障碍问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML">HTML：无障碍的良好基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript">CSS 和 JavaScript 无障碍最佳实践</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics">WAI-ARIA 基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/Multimedia">多媒体无障碍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/Mobile">移动端无障碍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting">测验：无障碍疑难解答</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/Core/Design_for_developers" class="only-in-en-us">为开发人员设计</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Version_control">版本控制</a></li><li class="section"><a href="/en-US/docs/Learn_web_development/Extensions" class="only-in-en-us">扩展模块</a></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes">对象原型</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming">面向对象编程基本概念</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript">JavaScript 中的类</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice">实践对象构造</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features">为“弹球”示例添加新功能</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs">客户端 Web API</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Web API 简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs">视频和音频 API</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics">绘图</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage">客户端存储</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs">第三方 API</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS">异步 JavaScript</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Introducing">异步 JavaScript 简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Promises">如何使用 Promise</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API">如何实现基于 Promise 的 API</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers">worker 简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations">序列动画</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms">Web 表单</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Your_first_form">创建我的第一个表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form">如何构建 HTML 表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls">原生表单部件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">HTML5 的输入（input）类型</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Other_form_controls">其他表单控件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms">样式化 Web 表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">表单样式化进阶</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI 伪类</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Form_validation">表单数据校验</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">发送表单数据</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools">理解客户端工具</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Overview">客户端工具概述</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">软件包管理基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain">介绍完整的工具链</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">部署我们的应用</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side">服务端网站</a></summary><ol><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps">服务端基础</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction">服务端编程介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview">客户端服务端交互概述</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks">服务端 web 框架</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">站点安全</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django">Django web 框架（Python）</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Introduction">Django 介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/development_environment">设置 Django 开发环境</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website">Django Tutorial Part 2: 创建网站的地基</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Models">Django Tutorial Part 3: 使用模型</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site">Django Tutorial Part 4: Django 管理员站点</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Home_page">Django 教程 5：主页构建</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views">Django 教程 6: 通用列表和详细信息视图</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Sessions">Django 教程 7: 会话框架</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Authentication">Django 教程 8：用户授权与许可</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Forms">Django 教程 9: 使用表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Testing">Django 教程 10: 测试 Django 网页应用</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Deployment">Django 教程 11：部署 Django 到生产环境</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security">Django Web 应用安全</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog">评估：DIY Django 微博客</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs">Express web 框架（Node.js）</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction">Express/Node 入门</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">设置 Node 开发环境</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">Express 教程：本地图书馆网站</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website">Express 教程 2：创建站点框架</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose">Express 教程 3：使用数据库 (Mongoose)</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes">Express 教程 4：路由和控制器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data">Express 教程 5: 呈现图书馆数据</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express 教程 6: 使用表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment">Express 教程 7：部署到生产环境</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance">Web 性能</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/why_web_performance">Web 性能的重要性</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/What_is_web_performance">什么是 web 性能？</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/Perceived_performance">感知性能</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance">测量性能</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/Multimedia">多媒体：图片</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/video">多媒体：视频</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/JavaScript">JavaScript 性能优化</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/HTML">HTML 性能优化</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/CSS">CSS 性能优化</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/business_case_for_performance">web 性能的商业案例</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing">测试</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Introduction">跨浏览器测试介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Testing_strategies">测试的策略</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS">处理常见的 HTML 和 CSS 问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Feature_detection">实现特性检测</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Automated_testing">自动化测试简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment">搭建自己的自动化测试环境</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Transform_animate" class="only-in-en-us">CSS 变换与动画化</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Security_privacy" class="only-in-en-us">安全与隐私</a></li><li class="section">更多资源</li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Howto">如何解决常见问题</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Howto/Solve_HTML_problems">使用 HTML 解决常见问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Solve_CSS_problems">解决常见的 CSS 问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Solve_JavaScript_problems">解决 JavaSctript 代码的常见问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Web_mechanics">Web 机制</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup">工具和安装</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Design_and_accessibility">设计与无障碍</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/About" class="only-in-en-us">关于</a></li><li><a href="/en-US/docs/Learn_web_development/Educators" class="only-in-en-us">面向教育工作者的资源</a></li><li><a href="/en-US/docs/Learn_web_development/Changelog" class="only-in-en-us">更新日志</a></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">在本文中</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#把字符串当作对象">把字符串当作对象</a></li><li class="document-toc-item "><a class="document-toc-link" href="#主动学习的示例">主动学习的示例</a></li><li class="document-toc-item "><a class="document-toc-link" href="#结论">结论</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="zh-CN"><header><h1>有用的字符串方法</h1></header><div class="section-content"><ul class="prev-next"><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Core/Scripting/Strings"><span class="button-wrap"> 上一页 </span></a></li><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Core/Scripting"><span class="button-wrap"> 概述：创建 JavaScript 代码块</span></a></li><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays"><span class="button-wrap"> 下一页 </span></a></li></ul> <p>现在我们学习基本的字符串语法，让我们开始思考一下我们可以对内置方法的字符串做什么有用的操作，例如查找文本字符串的长度，加入和分割字符串，将字符串中的一个字符替换为另一个字符。</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">前提：</th> <td> 基本的电脑知识，对 HTML 和 CSS 有一定的了解，最好是懂一点 javascript 知识。 </td> </tr> <tr> <th scope="row">目标：</th> <td>明白字符串这个对象，学会使用字符串的基本方法去处理字符串</td> </tr> </tbody> </table></figure></div><section aria-labelledby="把字符串当作对象"><h2 id="把字符串当作对象"><a href="#把字符串当作对象">把字符串当作对象</a></h2><div class="section-content"><p>我们曾经说过，现在我们重申一遍—在 javascript 中，一切东西都可以被当作对象。例如我们创建一个字符串。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let string = "This is my string"; </code></pre></div> <p>一旦你的变量成为字符串对象实例，你就可以有大量的原型和方法编辑它。如果你进入<a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a>对象页并观察页面旁边的列表你就会明白这一点。</p> <p><strong>可能现在你的大脑开始迷糊了，不要担心！</strong> 在你的学习进程中你真的不需要过早地理解大部分这方面知识，但是接下来我们这儿要看的是你要经常使用的一些知识。</p> <p>现在我们在控制台中加些示例，我们已经提供了以下示例（你可在单独打开控制台标签或窗口，或者选择使用<a href="/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools">浏览器开发者控制台</a>）</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><!doctype html> <html> <head> <meta charset="utf-8" /> <title>JavaScript console</title> <style> * { box-sizing: border-box; } html { background-color: #0c323d; color: #809089; font-family: monospace; } body { max-width: 700px; } p { margin: 0; width: 1%; padding: 0 1%; font-size: 16px; line-height: 1.5; float: left; } .input p { margin-right: 1%; } .output p { width: 100%; } .input input { width: 96%; float: left; border: none; font-size: 16px; line-height: 1.5; font-family: monospace; padding: 0; background: #0c323d; color: #809089; } div { clear: both; } </style> </head> <body></body> <script> var geval = eval; function createInput() { var inputDiv = document.createElement("div"); var inputPara = document.createElement("p"); var inputForm = document.createElement("input"); inputDiv.setAttribute("class", "input"); inputPara.textContent = ">"; inputDiv.appendChild(inputPara); inputDiv.appendChild(inputForm); document.body.appendChild(inputDiv); inputForm.addEventListener("change", executeCode); } function executeCode(e) { try { var result = geval(e.target.value); } catch (e) { var result = "error — " + e.message; } var outputDiv = document.createElement("div"); var outputPara = document.createElement("p"); outputDiv.setAttribute("class", "output"); outputPara.textContent = "Result: " + result; outputDiv.appendChild(outputPara); document.body.appendChild(outputDiv); e.target.disabled = true; e.target.parentNode.style.opacity = "0.5"; createInput(); } createInput(); </script> </html> </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="把字符串当作对象 sample" id="frame_把字符串当作对象" width="100%" height="300" src="about:blank" data-live-path="/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods/" data-live-id="把字符串当作对象" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="获得字符串的长度"><h3 id="获得字符串的长度"><a href="#获得字符串的长度">获得字符串的长度</a></h3><div class="section-content"><p>这很简单 — 你可以很轻松的使用 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/length"><code>length</code></a> 属性。尝试输入以下的两行代码：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let browserType = "mozilla"; browserType.length; </code></pre></div> <p>这个结果应该返回一个数字：7，因为"mozilla"的长度为 7 个字符。说字符串的长度有用是有很多原因的，例如，你可能想算出一连串名字的长度，并用名字长度来作为名字排序的依据，亦或让一个用户知道他输入的用户名太长，已经超出了输入的字符串长度限制。</p></div></section><section aria-labelledby="检索特定字符串字符"><h3 id="检索特定字符串字符"><a href="#检索特定字符串字符">检索特定字符串字符</a></h3><div class="section-content"><p>在相关的注释中，你可以使用方括号表示法返回字符串中的任何字符 - 这意味着你可以在变量名的末尾包含方括号（[ ]）。在方括号内，你可以包含要返回的字符的编号，例如，你要检索第一个字母，可以这样做：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>browserType[0]; </code></pre></div> <p>电脑从 0 开始，不是 1！要检索任何字符串的最后一个字符，我们可以使用下面这行，将这种技术与我们上面看到的 length 属性相结合起来：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>browserType[browserType.length - 1]; </code></pre></div> <p>“mozilla”的长度为 7，但由于计数从 0 开始，所以字符位置为 6，因此需要长度为<strong>length-1</strong>。例如，你可以使用它来查找一系列字符串的第一个字母，并按字母顺序排列。</p></div></section><section aria-labelledby="在字符串中查找子字符串并提取它"><h3 id="在字符串中查找子字符串并提取它"><a href="#在字符串中查找子字符串并提取它">在字符串中查找子字符串并提取它</a></h3><div class="section-content"><ol> <li> <p>有时候你会想要找出一个较小的字符串是否存在于一个较大的字符串中（我们通常会说一个字符串中存在一个子字符串）。这可以使用<a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf"><code>indexOf()</code></a>方法来完成，该方法需要一个<a href="/zh-CN/docs/Glossary/Parameter">parameter</a> — 你想要搜索的子字符串。尝试以下：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>browserType.indexOf("zilla"); </code></pre></div> <p>结果是 2，因为子字符串“zilla”从“mozilla”内的位置 2（0、1、2——所以从第 3 个字符）开始。这样的代码可以用来过滤字符串。例如，假设我们有一个 Web 地址列表，但我们只想打印出包含“mozilla”的那些地址。</p> </li> <li> <p>这可以用另一种可能更有效的方式来实现。尝试以下：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>browserType.indexOf("vanilla"); </code></pre></div> <p>这应该会得到 <code>-1</code> 的结果——当在主字符串中找不到子字符串（在本例中为“vanilla”）时将返回 <code>-1</code>。</p> <p>你可以使用它来查找不包含子串“mozilla”的所有字符串实例，或者如果使用否定运算符，请执行以下操作。你可以这样做：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>if (browserType.indexOf("mozilla") !== -1) { // do stuff with the string } </code></pre></div> </li> <li> <p>当你知道字符串中的子字符串开始的位置，以及想要结束的字符时，<a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/slice"><code>slice()</code></a>可以用来提取它。尝试以下：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>browserType.slice(0, 3); </code></pre></div> <p>这时返回"moz"——第一个参数是开始提取的字符位置，第二个参数是提取的最后一个字符的后一个位置。所以提取从第一个位置开始，直到但不包括最后一个位置。（此例中）你也可以说第二个参数等于被返回的字符串的长度。</p> </li> <li> <p>此外，如果你知道要在某个字符之后提取字符串中的所有剩余字符，则不必包含第二个参数，而只需要包含要从中提取的字符位置字符串中的其余字符。尝试以下：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>browserType.slice(2); </code></pre></div> <p>这返回“zilla”——这是因为 2 的字符位置是字母 z，并且因为没有包含第二个参数，所以返回的子字符串是字符串中的所有剩余字符。</p> </li> </ol> <div class="notecard note"> <p><strong>备注：</strong> <code>slice()</code>的第二个参数是可选的：如果没有传入这个参数，分片结束位置会在原始字符串的末尾。这个方法也有其他的选项；学习<a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/slice"><code>slice()</code></a>这页，来看看你还能发现什么其他作用。</p> </div></div></section><section aria-labelledby="转换大小写"><h3 id="转换大小写"><a href="#转换大小写">转换大小写</a></h3><div class="section-content"><p>字符串方法<a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase"><code>toLowerCase()</code></a>和<a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase"><code>toUpperCase()</code></a>字符串并将所有字符分别转换为小写或大写。例如，如果要在将数据存储在数据库中之前对所有用户输入的数据进行规范化，这可能非常有用。</p> <p>让我们尝试输入以下几行来看看会发生什么：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let radData = "My NaMe Is MuD"; radData.toLowerCase(); radData.toUpperCase(); </code></pre></div></div></section><section aria-labelledby="替换字符串的某部分"><h3 id="替换字符串的某部分"><a href="#替换字符串的某部分">替换字符串的某部分</a></h3><div class="section-content"><p>你可以使用<a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace"><code>replace()</code></a>方法将字符串中的一个子字符串替换为另一个子字符串。在基础的层面上，这个工作非常简单。你当然可以用它做一些更高级的事情，但目前我们不会涉及到。</p> <p>它需要两个参数 - 要被替换下的字符串和要被替换上的字符串。尝试这个例子：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>browserType.replace("moz", "van"); </code></pre></div> <p>注意，在实际程序中，想要真正更新 <code>browserType</code> 变量的值，你需要设置变量的值等于刚才的操作结果；它不会自动更新子串的值。所以事实上你需要这样写：<code>browserType = browserType.replace('moz','van');</code>。</p></div></section><section aria-labelledby="主动学习的示例"><h2 id="主动学习的示例"><a href="#主动学习的示例">主动学习的示例</a></h2><div class="section-content"><p>在本节中，我们会让你尽力编写一些字符串操作代码。在下面的每个练习中，我们有一个字符串数组，一个循环，用于处理数组中的每个值，并将其显示在项目符号列表中。你现在不需要了解数组或循环 - 这些将在以后的文章中解释。所有你需要做的每一种情况都是写出将以我们想要的格式输出字符串的代码。</p> <p>每个示例都附带一个“重置”按钮，你可以使用该按钮重置代码，如果你犯了错误，并且无法再次工作，并且显示解决方案按钮，你可以按下来看到一个潜在的答案，如果你真的卡住了。</p></div></section><section aria-labelledby="过滤问候留言"><h3 id="过滤问候留言"><a href="#过滤问候留言">过滤问候留言</a></h3><div class="section-content"><p>在第一个练习中，我们将简单介绍一下 - 我们有一系列的问候卡片消息，但我们希望对它们进行排序，以列出圣诞消息。我们希望你在 <code>if(...)</code> 结构中填写条件测试，以测试每个字符串，并将其打印在列表中，如果它是圣诞消息。</p> <ol> <li>首先考虑一下如何测试每种情况下的消息是否为圣诞消息。所有这些消息中都有什么字符串，你可以使用什么方法来测试是否存在？</li> <li>然后，你需要编写 <em>操作数 1 操作符操作数 2</em> 形式的条件测试。左边的东西等于右边的东西吗？或者在这种情况下，方法调用在左边返回的结果在右边？</li> <li>提示：在这种情况下，测试方法调用是否不等于某个结果可能更有用。</li> </ol> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="output" style="min-height: 125px;"> <ul></ul> </div> <textarea id="code" class="playable-code" style="height: 290px;"> var list = document.querySelector('.output ul'); list.innerHTML = ''; var greetings = ['Happy Birthday!', 'Merry Christmas my love', 'A happy Christmas to all the family', 'You\'re all I want for Christmas', 'Get well soon']; for (var i = 0; i < greetings.length; i++) { var input = greetings[i]; // Your conditional test needs to go inside the parentheses // in the line below, replacing what's currently there if (greetings[i]) { var result = input; var listItem = document.createElement('li'); listItem.textContent = result; list.appendChild(listItem); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="Reset" /> <input id="solution" type="button" value="Show solution" /> </div> </code></pre></div> <div class="code-example"><pre class="brush: js hidden notranslate"><code>var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var code = textarea.value; function updateCode() { eval(textarea.value); } reset.addEventListener("click", function () { textarea.value = code; updateCode(); }); solution.addEventListener("click", function () { textarea.value = jsSolution; updateCode(); }); var jsSolution = "var list = document.querySelector('.output ul');\nlist.innerHTML = '';\nvar greetings = ['Happy Birthday!',\n 'Merry Christmas my love',\n 'A happy Christmas to all the family',\n 'You\\'re all I want for Christmas',\n 'Get well soon'];\n\nfor(var i = 0; i < greetings.length; i++) {\n var input = greetings[i];\n if(greetings[i].indexOf('Christmas') !== -1) {\n var result = input;\n var listItem = document.createElement('li');\n listItem.textContent = result;\n list.appendChild(listItem);\n }\n}"; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="过滤问候留言 sample" id="frame_过滤问候留言" width="100%" height="490" src="about:blank" data-live-path="/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods/" data-live-id="过滤问候留言" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="大写修正"><h3 id="大写修正"><a href="#大写修正">大写修正</a></h3><div class="section-content"><p>在这个练习中，我们有英国城市的名字，但是这个大写字母都搞砸了。我们希望你改变它们，使它们都是小写字母，除了首字母。一个很好的方法是：</p> <ol> <li>将输入变量中包含的整个字符串转换为小写，并将其存储在新变量中。</li> <li>在此新变量中获取字符串的第一个字母并将其存储在另一个变量中。</li> <li>将此最新变量用作子字符串，将小写字符串的第一个字母从小写更改为大写。将此替换过程的结果存储在另一个新变量中。</li> <li>让 <code>result</code> 变量的值与最终结果相等，而不是使用 <code>input</code> 变量。</li> </ol> <div class="notecard note"> <p><strong>备注：</strong> 一个提示 - 字符串方法的参数不必是字符串文字; 它们也可以是变量，甚至是在其上调用方法的变量。</p> </div> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="output" style="min-height: 125px;"> <ul></ul> </div> <textarea id="code" class="playable-code" style="height: 250px;"> var list = document.querySelector('.output ul'); list.innerHTML = ''; var cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL']; for(var i = 0; i < cities.length; i++) { var input = cities[i]; // write your code just below here var result = input; var listItem = document.createElement('li'); listItem.textContent = result; list.appendChild(listItem); } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="Reset" /> <input id="solution" type="button" value="Show solution" /> </div> </code></pre></div> <div class="code-example"><pre class="brush: js hidden notranslate"><code>var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var code = textarea.value; function updateCode() { eval(textarea.value); } reset.addEventListener("click", function () { textarea.value = code; updateCode(); }); solution.addEventListener("click", function () { textarea.value = jsSolution; updateCode(); }); var jsSolution = "var list = document.querySelector('.output ul');\nlist.innerHTML = '';\nvar cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];\n\nfor(var i = 0; i < cities.length; i++) {\n var input = cities[i];\n var lower = input.toLowerCase();\n var firstLetter = lower.slice(0,1);\n var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n var result = capitalized;\n var listItem = document.createElement('li');\n listItem.textContent = result;\n list.appendChild(listItem);\n\n}"; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="大写修正 sample" id="frame_大写修正" width="100%" height="450" src="about:blank" data-live-path="/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods/" data-live-id="大写修正" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="从原先部分得到新字符串"><h3 id="从原先部分得到新字符串"><a href="#从原先部分得到新字符串">从原先部分得到新字符串</a></h3><div class="section-content"><p>在最后一个练习中，阵列包含一堆字符串，其中包含有关英格兰北部火车站的信息。字符串是包含三字母站代码的数据项，后面是一些机器可读数据，后跟分号，后跟可读站名。例如：</p> <pre class="brush: plain notranslate">MAN675847583748sjt567654;Manchester Piccadilly </pre> <p>我们要提取站点代码和名称，并将它们放在一起，具有以下结构的字符串：</p> <pre class="brush: plain notranslate">MAN: Manchester Piccadilly </pre> <p>我们建议这样做：</p> <ol> <li>提取三个字母的站代码并将其存储在一个新的变量中。</li> <li>查找分号的字符索引号。</li> <li>使用分号字符索引号作为参考点提取人可读的站名，并将其存储在新变量中。</li> <li>连接两个新的变量和一个字符串文字，使最终的字符串。</li> <li>将 <code>result</code> 变量的值更改为等于最终的字符串，而不是 <code>input</code>。</li> </ol> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="output" style="min-height: 125px;"> <ul></ul> </div> <textarea id="code" class="playable-code" style="height: 285px;"> var list = document.querySelector('.output ul'); list.innerHTML = ''; var stations = ['MAN675847583748sjt567654;Manchester Piccadilly', 'GNF576746573fhdg4737dh4;Greenfield', 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street', 'SYB4f65hf75f736463;Stalybridge', 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield']; for (var i = 0; i < stations.length; i++) { var input = stations[i]; // write your code just below here var result = input; var listItem = document.createElement('li'); listItem.textContent = result; list.appendChild(listItem); } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="Reset" /> <input id="solution" type="button" value="Show solution" /> </div> </code></pre></div> <div class="code-example"><pre class="brush: js hidden notranslate"><code>var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var code = textarea.value; function updateCode() { eval(textarea.value); } reset.addEventListener("click", function () { textarea.value = code; updateCode(); }); solution.addEventListener("click", function () { textarea.value = jsSolution; updateCode(); }); var jsSolution = "var list = document.querySelector('.output ul');\nlist.innerHTML = '';\nvar stations = ['MAN675847583748sjt567654;Manchester Piccadilly',\n 'GNF576746573fhdg4737dh4;Greenfield',\n 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',\n 'SYB4f65hf75f736463;Stalybridge',\n 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];\n\nfor(var i = 0; i < stations.length; i++) {\n var input = stations[i];\n var code = input.slice(0,3);\n var semiC = input.indexOf(';');\n var name = input.slice(semiC + 1);\n var final = code + ': ' + name;\n var result = final;\n var listItem = document.createElement('li');\n listItem.textContent = result;\n list.appendChild(listItem);\n}"; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="从原先部分得到新字符串 sample" id="frame_从原先部分得到新字符串" width="100%" height="485" src="about:blank" data-live-path="/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods/" data-live-id="从原先部分得到新字符串" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="结论"><h2 id="结论"><a href="#结论">结论</a></h2><div class="section-content"><p>你不能逃避的事实是在编程中处理单词和句子是非常重要的——特别是在 JavaScript 中，因为网站都是关于与人沟通的。本文已经给出了你现在需要了解的关于操作字符串的基础知识。这将在未来进入更复杂的主题时为你服务。接下来，我们将在短期内研究我们需要关注的最后一个主要的数据类型——数组。</p> <ul class="prev-next"><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Core/Scripting/Strings"><span class="button-wrap"> 上一页 </span></a></li><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Core/Scripting"><span class="button-wrap"> 概述：创建 JavaScript 代码块</span></a></li><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays"><span class="button-wrap"> 下一页 </span></a></li></ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>Help improve MDN</h2><fieldset class="feedback"><label>Was this page helpful to you?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button></div></fieldset><a class="contribute" href="https://github.com/mdn/translated-content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.<p class="last-modified-date">This page was last modified on <time dateTime="2024-12-25T01:16:37.000Z">2024年12月25日</time> by <a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods/contributors.txt" rel="nofollow">MDN contributors</a>.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content/blob/main/files/zh-cn/learn_web_development/core/scripting/useful_string_methods/index.md?plain=1" title="Folder: zh-cn/learn_web_development/core/scripting/useful_string_methods (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://github.com/mdn/translated-content/issues/new?template=page-report-zh-cn.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FUseful_string_methods&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60zh-cn%2Flearn_web_development%2Fcore%2Fscripting%2Fuseful_string_methods%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FUseful_string_methods%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fzh-cn%2Flearn_web_development%2Fcore%2Fscripting%2Fuseful_string_methods%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2Fb61971bb4836b5fda657fac82930c2c32017a3f0%0A*+Document+last+modified%3A+2024-12-25T01%3A16%3A37.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/zh-CN/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Strings\"><span class=\"button-wrap\"> 上一页 </span></a></li><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Core/Scripting\"><span class=\"button-wrap\"> 概述：创建 JavaScript 代码块</span></a></li><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays\"><span class=\"button-wrap\"> 下一页 </span></a></li></ul>\n<p>现在我们学习基本的字符串语法，让我们开始思考一下我们可以对内置方法的字符串做什么有用的操作，例如查找文本字符串的长度，加入和分割字符串，将字符串中的一个字符替换为另一个字符。</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">前提：</th>\n <td>\n 基本的电脑知识，对 HTML 和 CSS 有一定的了解，最好是懂一点 javascript\n 知识。\n </td>\n </tr>\n <tr>\n <th scope=\"row\">目标：</th>\n <td>明白字符串这个对象，学会使用字符串的基本方法去处理字符串</td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"把字符串当作对象","title":"把字符串当作对象","isH3":false,"content":"<p>我们曾经说过，现在我们重申一遍—在 javascript 中，一切东西都可以被当作对象。例如我们创建一个字符串。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let string = \"This is my string\";\n</code></pre></div>\n<p>一旦你的变量成为字符串对象实例，你就可以有大量的原型和方法编辑它。如果你进入<a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String\"><code>String</code></a>对象页并观察页面旁边的列表你就会明白这一点。</p>\n<p><strong>可能现在你的大脑开始迷糊了，不要担心！</strong> 在你的学习进程中你真的不需要过早地理解大部分这方面知识，但是接下来我们这儿要看的是你要经常使用的一些知识。</p>\n<p>现在我们在控制台中加些示例，我们已经提供了以下示例（你可在单独打开控制台标签或窗口，或者选择使用<a href=\"/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools\">浏览器开发者控制台</a>）</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><!doctype html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <title>JavaScript console</title>\n <style>\n * {\n box-sizing: border-box;\n }\n\n html {\n background-color: #0c323d;\n color: #809089;\n font-family: monospace;\n }\n\n body {\n max-width: 700px;\n }\n\n p {\n margin: 0;\n width: 1%;\n padding: 0 1%;\n font-size: 16px;\n line-height: 1.5;\n float: left;\n }\n\n .input p {\n margin-right: 1%;\n }\n\n .output p {\n width: 100%;\n }\n\n .input input {\n width: 96%;\n float: left;\n border: none;\n font-size: 16px;\n line-height: 1.5;\n font-family: monospace;\n padding: 0;\n background: #0c323d;\n color: #809089;\n }\n\n div {\n clear: both;\n }\n </style>\n </head>\n <body></body>\n\n <script>\n var geval = eval;\n function createInput() {\n var inputDiv = document.createElement(\"div\");\n var inputPara = document.createElement(\"p\");\n var inputForm = document.createElement(\"input\");\n\n inputDiv.setAttribute(\"class\", \"input\");\n inputPara.textContent = \">\";\n inputDiv.appendChild(inputPara);\n inputDiv.appendChild(inputForm);\n document.body.appendChild(inputDiv);\n\n inputForm.addEventListener(\"change\", executeCode);\n }\n\n function executeCode(e) {\n try {\n var result = geval(e.target.value);\n } catch (e) {\n var result = \"error — \" + e.message;\n }\n\n var outputDiv = document.createElement(\"div\");\n var outputPara = document.createElement(\"p\");\n\n outputDiv.setAttribute(\"class\", \"output\");\n outputPara.textContent = \"Result: \" + result;\n outputDiv.appendChild(outputPara);\n document.body.appendChild(outputDiv);\n\n e.target.disabled = true;\n e.target.parentNode.style.opacity = \"0.5\";\n\n createInput();\n }\n\n createInput();\n </script>\n</html>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"把字符串当作对象 sample\" id=\"frame_把字符串当作对象\" width=\"100%\" height=\"300\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods/\" data-live-id=\"把字符串当作对象\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"获得字符串的长度","title":"获得字符串的长度","isH3":true,"content":"<p>这很简单 — 你可以很轻松的使用 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/length\"><code>length</code></a> 属性。尝试输入以下的两行代码：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let browserType = \"mozilla\";\nbrowserType.length;\n</code></pre></div>\n<p>这个结果应该返回一个数字：7，因为\"mozilla\"的长度为 7 个字符。说字符串的长度有用是有很多原因的，例如，你可能想算出一连串名字的长度，并用名字长度来作为名字排序的依据，亦或让一个用户知道他输入的用户名太长，已经超出了输入的字符串长度限制。</p>"}},{"type":"prose","value":{"id":"检索特定字符串字符","title":"检索特定字符串字符","isH3":true,"content":"<p>在相关的注释中，你可以使用方括号表示法返回字符串中的任何字符 - 这意味着你可以在变量名的末尾包含方括号（[ ]）。在方括号内，你可以包含要返回的字符的编号，例如，你要检索第一个字母，可以这样做：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>browserType[0];\n</code></pre></div>\n<p>电脑从 0 开始，不是 1！要检索任何字符串的最后一个字符，我们可以使用下面这行，将这种技术与我们上面看到的 length 属性相结合起来：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>browserType[browserType.length - 1];\n</code></pre></div>\n<p>“mozilla”的长度为 7，但由于计数从 0 开始，所以字符位置为 6，因此需要长度为<strong>length-1</strong>。例如，你可以使用它来查找一系列字符串的第一个字母，并按字母顺序排列。</p>"}},{"type":"prose","value":{"id":"在字符串中查找子字符串并提取它","title":"在字符串中查找子字符串并提取它","isH3":true,"content":"<ol>\n<li>\n<p>有时候你会想要找出一个较小的字符串是否存在于一个较大的字符串中（我们通常会说一个字符串中存在一个子字符串）。这可以使用<a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf\"><code>indexOf()</code></a>方法来完成，该方法需要一个<a href=\"/zh-CN/docs/Glossary/Parameter\">parameter</a> — 你想要搜索的子字符串。尝试以下：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>browserType.indexOf(\"zilla\");\n</code></pre></div>\n<p>结果是 2，因为子字符串“zilla”从“mozilla”内的位置 2（0、1、2——所以从第 3 个字符）开始。这样的代码可以用来过滤字符串。例如，假设我们有一个 Web 地址列表，但我们只想打印出包含“mozilla”的那些地址。</p>\n</li>\n<li>\n<p>这可以用另一种可能更有效的方式来实现。尝试以下：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>browserType.indexOf(\"vanilla\");\n</code></pre></div>\n<p>这应该会得到 <code>-1</code> 的结果——当在主字符串中找不到子字符串（在本例中为“vanilla”）时将返回 <code>-1</code>。</p>\n<p>你可以使用它来查找不包含子串“mozilla”的所有字符串实例，或者如果使用否定运算符，请执行以下操作。你可以这样做：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>if (browserType.indexOf(\"mozilla\") !== -1) {\n // do stuff with the string\n}\n</code></pre></div>\n</li>\n<li>\n<p>当你知道字符串中的子字符串开始的位置，以及想要结束的字符时，<a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/slice\"><code>slice()</code></a>可以用来提取它。尝试以下：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>browserType.slice(0, 3);\n</code></pre></div>\n<p>这时返回\"moz\"——第一个参数是开始提取的字符位置，第二个参数是提取的最后一个字符的后一个位置。所以提取从第一个位置开始，直到但不包括最后一个位置。（此例中）你也可以说第二个参数等于被返回的字符串的长度。</p>\n</li>\n<li>\n<p>此外，如果你知道要在某个字符之后提取字符串中的所有剩余字符，则不必包含第二个参数，而只需要包含要从中提取的字符位置字符串中的其余字符。尝试以下：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>browserType.slice(2);\n</code></pre></div>\n<p>这返回“zilla”——这是因为 2 的字符位置是字母 z，并且因为没有包含第二个参数，所以返回的子字符串是字符串中的所有剩余字符。</p>\n</li>\n</ol>\n<div class=\"notecard note\">\n<p><strong>备注：</strong> <code>slice()</code>的第二个参数是可选的：如果没有传入这个参数，分片结束位置会在原始字符串的末尾。这个方法也有其他的选项；学习<a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/slice\"><code>slice()</code></a>这页，来看看你还能发现什么其他作用。</p>\n</div>"}},{"type":"prose","value":{"id":"转换大小写","title":"转换大小写","isH3":true,"content":"<p>字符串方法<a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase\"><code>toLowerCase()</code></a>和<a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase\"><code>toUpperCase()</code></a>字符串并将所有字符分别转换为小写或大写。例如，如果要在将数据存储在数据库中之前对所有用户输入的数据进行规范化，这可能非常有用。</p>\n<p>让我们尝试输入以下几行来看看会发生什么：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let radData = \"My NaMe Is MuD\";\nradData.toLowerCase();\nradData.toUpperCase();\n</code></pre></div>"}},{"type":"prose","value":{"id":"替换字符串的某部分","title":"替换字符串的某部分","isH3":true,"content":"<p>你可以使用<a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace\"><code>replace()</code></a>方法将字符串中的一个子字符串替换为另一个子字符串。在基础的层面上，这个工作非常简单。你当然可以用它做一些更高级的事情，但目前我们不会涉及到。</p>\n<p>它需要两个参数 - 要被替换下的字符串和要被替换上的字符串。尝试这个例子：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>browserType.replace(\"moz\", \"van\");\n</code></pre></div>\n<p>注意，在实际程序中，想要真正更新 <code>browserType</code> 变量的值，你需要设置变量的值等于刚才的操作结果；它不会自动更新子串的值。所以事实上你需要这样写：<code>browserType = browserType.replace('moz','van');</code>。</p>"}},{"type":"prose","value":{"id":"主动学习的示例","title":"主动学习的示例","isH3":false,"content":"<p>在本节中，我们会让你尽力编写一些字符串操作代码。在下面的每个练习中，我们有一个字符串数组，一个循环，用于处理数组中的每个值，并将其显示在项目符号列表中。你现在不需要了解数组或循环 - 这些将在以后的文章中解释。所有你需要做的每一种情况都是写出将以我们想要的格式输出字符串的代码。</p>\n<p>每个示例都附带一个“重置”按钮，你可以使用该按钮重置代码，如果你犯了错误，并且无法再次工作，并且显示解决方案按钮，你可以按下来看到一个潜在的答案，如果你真的卡住了。</p>"}},{"type":"prose","value":{"id":"过滤问候留言","title":"过滤问候留言","isH3":true,"content":"<p>在第一个练习中，我们将简单介绍一下 - 我们有一系列的问候卡片消息，但我们希望对它们进行排序，以列出圣诞消息。我们希望你在 <code>if(...)</code> 结构中填写条件测试，以测试每个字符串，并将其打印在列表中，如果它是圣诞消息。</p>\n<ol>\n<li>首先考虑一下如何测试每种情况下的消息是否为圣诞消息。所有这些消息中都有什么字符串，你可以使用什么方法来测试是否存在？</li>\n<li>然后，你需要编写 <em>操作数 1 操作符操作数 2</em> 形式的条件测试。左边的东西等于右边的东西吗？或者在这种情况下，方法调用在左边返回的结果在右边？</li>\n<li>提示：在这种情况下，测试方法调用是否不等于某个结果可能更有用。</li>\n</ol>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"output\" style=\"min-height: 125px;\">\n <ul></ul>\n</div>\n\n<textarea id=\"code\" class=\"playable-code\" style=\"height: 290px;\">\nvar list = document.querySelector('.output ul');\nlist.innerHTML = '';\nvar greetings = ['Happy Birthday!',\n 'Merry Christmas my love',\n 'A happy Christmas to all the family',\n 'You\\'re all I want for Christmas',\n 'Get well soon'];\n\nfor (var i = 0; i < greetings.length; i++) {\n var input = greetings[i];\n // Your conditional test needs to go inside the parentheses\n // in the line below, replacing what's currently there\n if (greetings[i]) {\n var result = input;\n var listItem = document.createElement('li');\n listItem.textContent = result;\n list.appendChild(listItem);\n }\n}\n</textarea>\n\n<div class=\"playable-buttons\">\n <input id=\"reset\" type=\"button\" value=\"Reset\" />\n <input id=\"solution\" type=\"button\" value=\"Show solution\" />\n</div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: js hidden notranslate\"><code>var textarea = document.getElementById(\"code\");\nvar reset = document.getElementById(\"reset\");\nvar solution = document.getElementById(\"solution\");\nvar code = textarea.value;\n\nfunction updateCode() {\n eval(textarea.value);\n}\n\nreset.addEventListener(\"click\", function () {\n textarea.value = code;\n updateCode();\n});\n\nsolution.addEventListener(\"click\", function () {\n textarea.value = jsSolution;\n updateCode();\n});\n\nvar jsSolution =\n \"var list = document.querySelector('.output ul');\\nlist.innerHTML = '';\\nvar greetings = ['Happy Birthday!',\\n 'Merry Christmas my love',\\n 'A happy Christmas to all the family',\\n 'You\\\\'re all I want for Christmas',\\n 'Get well soon'];\\n\\nfor(var i = 0; i < greetings.length; i++) {\\n var input = greetings[i];\\n if(greetings[i].indexOf('Christmas') !== -1) {\\n var result = input;\\n var listItem = document.createElement('li');\\n listItem.textContent = result;\\n list.appendChild(listItem);\\n }\\n}\";\n\ntextarea.addEventListener(\"input\", updateCode);\nwindow.addEventListener(\"load\", updateCode);\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"过滤问候留言 sample\" id=\"frame_过滤问候留言\" width=\"100%\" height=\"490\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods/\" data-live-id=\"过滤问候留言\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"大写修正","title":"大写修正","isH3":true,"content":"<p>在这个练习中，我们有英国城市的名字，但是这个大写字母都搞砸了。我们希望你改变它们，使它们都是小写字母，除了首字母。一个很好的方法是：</p>\n<ol>\n<li>将输入变量中包含的整个字符串转换为小写，并将其存储在新变量中。</li>\n<li>在此新变量中获取字符串的第一个字母并将其存储在另一个变量中。</li>\n<li>将此最新变量用作子字符串，将小写字符串的第一个字母从小写更改为大写。将此替换过程的结果存储在另一个新变量中。</li>\n<li>让 <code>result</code> 变量的值与最终结果相等，而不是使用 <code>input</code> 变量。</li>\n</ol>\n<div class=\"notecard note\">\n<p><strong>备注：</strong>\n一个提示 - 字符串方法的参数不必是字符串文字; 它们也可以是变量，甚至是在其上调用方法的变量。</p>\n</div>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"output\" style=\"min-height: 125px;\">\n <ul></ul>\n</div>\n\n<textarea id=\"code\" class=\"playable-code\" style=\"height: 250px;\">\nvar list = document.querySelector('.output ul');\nlist.innerHTML = '';\nvar cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];\nfor(var i = 0; i < cities.length; i++) {\n var input = cities[i];\n // write your code just below here\n\n var result = input;\n var listItem = document.createElement('li');\n listItem.textContent = result;\n list.appendChild(listItem);\n}\n</textarea>\n\n<div class=\"playable-buttons\">\n <input id=\"reset\" type=\"button\" value=\"Reset\" />\n <input id=\"solution\" type=\"button\" value=\"Show solution\" />\n</div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: js hidden notranslate\"><code>var textarea = document.getElementById(\"code\");\nvar reset = document.getElementById(\"reset\");\nvar solution = document.getElementById(\"solution\");\nvar code = textarea.value;\n\nfunction updateCode() {\n eval(textarea.value);\n}\n\nreset.addEventListener(\"click\", function () {\n textarea.value = code;\n updateCode();\n});\n\nsolution.addEventListener(\"click\", function () {\n textarea.value = jsSolution;\n updateCode();\n});\n\nvar jsSolution =\n \"var list = document.querySelector('.output ul');\\nlist.innerHTML = '';\\nvar cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];\\n\\nfor(var i = 0; i < cities.length; i++) {\\n var input = cities[i];\\n var lower = input.toLowerCase();\\n var firstLetter = lower.slice(0,1);\\n var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\\n var result = capitalized;\\n var listItem = document.createElement('li');\\n listItem.textContent = result;\\n list.appendChild(listItem);\\n\\n}\";\n\ntextarea.addEventListener(\"input\", updateCode);\nwindow.addEventListener(\"load\", updateCode);\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"大写修正 sample\" id=\"frame_大写修正\" width=\"100%\" height=\"450\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods/\" data-live-id=\"大写修正\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"从原先部分得到新字符串","title":"从原先部分得到新字符串","isH3":true,"content":"<p>在最后一个练习中，阵列包含一堆字符串，其中包含有关英格兰北部火车站的信息。字符串是包含三字母站代码的数据项，后面是一些机器可读数据，后跟分号，后跟可读站名。例如：</p>\n<pre class=\"brush: plain notranslate\">MAN675847583748sjt567654;Manchester Piccadilly\n</pre>\n<p>我们要提取站点代码和名称，并将它们放在一起，具有以下结构的字符串：</p>\n<pre class=\"brush: plain notranslate\">MAN: Manchester Piccadilly\n</pre>\n<p>我们建议这样做：</p>\n<ol>\n<li>提取三个字母的站代码并将其存储在一个新的变量中。</li>\n<li>查找分号的字符索引号。</li>\n<li>使用分号字符索引号作为参考点提取人可读的站名，并将其存储在新变量中。</li>\n<li>连接两个新的变量和一个字符串文字，使最终的字符串。</li>\n<li>将 <code>result</code> 变量的值更改为等于最终的字符串，而不是 <code>input</code>。</li>\n</ol>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"output\" style=\"min-height: 125px;\">\n <ul></ul>\n</div>\n\n<textarea id=\"code\" class=\"playable-code\" style=\"height: 285px;\">\nvar list = document.querySelector('.output ul');\nlist.innerHTML = '';\nvar stations = ['MAN675847583748sjt567654;Manchester Piccadilly',\n 'GNF576746573fhdg4737dh4;Greenfield',\n 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',\n 'SYB4f65hf75f736463;Stalybridge',\n 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];\n\nfor (var i = 0; i < stations.length; i++) {\n var input = stations[i];\n // write your code just below here\n\n var result = input;\n var listItem = document.createElement('li');\n listItem.textContent = result;\n list.appendChild(listItem);\n}\n</textarea>\n\n<div class=\"playable-buttons\">\n <input id=\"reset\" type=\"button\" value=\"Reset\" />\n <input id=\"solution\" type=\"button\" value=\"Show solution\" />\n</div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: js hidden notranslate\"><code>var textarea = document.getElementById(\"code\");\nvar reset = document.getElementById(\"reset\");\nvar solution = document.getElementById(\"solution\");\nvar code = textarea.value;\n\nfunction updateCode() {\n eval(textarea.value);\n}\n\nreset.addEventListener(\"click\", function () {\n textarea.value = code;\n updateCode();\n});\n\nsolution.addEventListener(\"click\", function () {\n textarea.value = jsSolution;\n updateCode();\n});\n\nvar jsSolution =\n \"var list = document.querySelector('.output ul');\\nlist.innerHTML = '';\\nvar stations = ['MAN675847583748sjt567654;Manchester Piccadilly',\\n 'GNF576746573fhdg4737dh4;Greenfield',\\n 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',\\n 'SYB4f65hf75f736463;Stalybridge',\\n 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];\\n\\nfor(var i = 0; i < stations.length; i++) {\\n var input = stations[i];\\n var code = input.slice(0,3);\\n var semiC = input.indexOf(';');\\n var name = input.slice(semiC + 1);\\n var final = code + ': ' + name;\\n var result = final;\\n var listItem = document.createElement('li');\\n listItem.textContent = result;\\n list.appendChild(listItem);\\n}\";\n\ntextarea.addEventListener(\"input\", updateCode);\nwindow.addEventListener(\"load\", updateCode);\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"从原先部分得到新字符串 sample\" id=\"frame_从原先部分得到新字符串\" width=\"100%\" height=\"485\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods/\" data-live-id=\"从原先部分得到新字符串\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"结论","title":"结论","isH3":false,"content":"<p>你不能逃避的事实是在编程中处理单词和句子是非常重要的——特别是在 JavaScript 中，因为网站都是关于与人沟通的。本文已经给出了你现在需要了解的关于操作字符串的基础知识。这将在未来进入更复杂的主题时为你服务。接下来，我们将在短期内研究我们需要关注的最后一个主要的数据类型——数组。</p>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Strings\"><span class=\"button-wrap\"> 上一页 </span></a></li><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Core/Scripting\"><span class=\"button-wrap\"> 概述：创建 JavaScript 代码块</span></a></li><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays\"><span class=\"button-wrap\"> 下一页 </span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"zh-CN","mdn_url":"/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods","modified":"2024-12-25T01:16:37.000Z","native":"中文 (简体)","noIndexing":false,"other_translations":[{"locale":"en-US","title":"Useful string methods","native":"English (US)"},{"locale":"de","title":"Nützliche String-Methoden","native":"Deutsch"},{"locale":"es","title":"Métodos útiles con cadenas","native":"Español"},{"locale":"fr","title":"Méthodes utiles pour les chaînes de caractères","native":"Français"},{"locale":"ja","title":"便利な文字列メソッド","native":"日本語"},{"locale":"ko","title":"문자열 제대로 다루기","native":"한국어"},{"locale":"pt-BR","title":"Métodos úteis de string","native":"Português (do Brasil)"},{"locale":"ru","title":"Полезные методы для строк","native":"Русский"},{"locale":"zh-TW","title":"有用的字符串方法","native":"正體中文 (繁體)"}],"pageTitle":"有用的字符串方法 - 学习 Web 开发 | MDN","parents":[{"uri":"/zh-CN/docs/Learn_web_development","title":"学习 Web 开发"},{"uri":"/en-US/docs/Learn_web_development/Core","title":"Core learning modules"},{"uri":"/zh-CN/docs/Learn_web_development/Core/Scripting","title":"创建 JavaScript 代码块"},{"uri":"/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods","title":"有用的字符串方法"}],"popularity":null,"short_title":"有用的字符串方法","sidebarHTML":"<ol><li class=\"section\"><a href=\"/zh-CN/docs/Learn_web_development/Getting_started\">入门模块</a></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup\">配置环境</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">安装基础软件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">浏览互联网</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\" class=\"only-in-en-us\">Code editors</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">处理文件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">命令行速成课</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website\">你的第一个网站</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">你的网站会是什么样子？</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML 基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS 基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript 基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">发布你的网站</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards\" class=\"only-in-en-us\">Web 标准</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">万维网是如何工作的</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">Web 和 Web 标准</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\" class=\"only-in-en-us\">How browsers load websites</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills\" class=\"only-in-en-us\">软性技能</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\" class=\"only-in-en-us\">Research and learning</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\" class=\"only-in-en-us\">Collaboration and teamwork</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\" class=\"only-in-en-us\">Workflows and processes</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\" class=\"only-in-en-us\">Succeeding in job interviews</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Core\" class=\"only-in-en-us\">核心模块</a></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content\">使用 HTML 构建内容</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">开始学习 HTML</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">“头”里有什么——HTML 元信息</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">HTML 文本处理基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">强调与重要性</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Lists\" class=\"only-in-en-us\">Lists</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">文档与网站架构</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">文本格式进阶</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Creating_links\">创建超链接</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">标记信件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">构建网页内容</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML 中的图片</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">视频和音频内容</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Mozilla 欢迎页面</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">HTML 表格基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">HTML 表格进阶特性和无障碍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">作业：构建行星数据</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms\" class=\"only-in-en-us\">Forms and buttons in HTML</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">HTML 调试</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics\">CSS 样式基础</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">CSS 如何运行</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Getting_started\">让我们开始 CSS 的学习之旅</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">运用你的新知识</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">CSS 选择器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">属性选择器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">伪类和伪元素</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Combinators\">关系选择器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model\">盒模型</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">层叠、优先级与继承</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS 值和单位</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Sizing\">在 CSS 中调整大小</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">背景与边框</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Overflow\">溢出的内容</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">图像、媒体和表单元素</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Tables\">样式化表格</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">调试 CSS</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">基本的 CSS 理解</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">创建精美的信纸</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">一个漂亮的盒子</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling\">CSS 文本样式</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Fundamentals\">基本文本和字体样式</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_lists\">为列表添加样式</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_links\">样式化链接</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Web_fonts\">Web 字体</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">作业：排版社区大学首页</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout\">CSS 排版</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Introduction\">介绍 CSS 布局</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Floats\">浮动</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Positioning\">定位</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Flexbox\">弹性盒子</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Grids\">网格</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">响应式设计</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Media_queries\">媒体查询入门指南</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">作业：基本布局理解</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting\">使用 JavaScript 动态编码</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">什么是 JavaScript？</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/A_first_splash\">JavaScript 初体验</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/What_went_wrong\">查找并解决 JavaScript 代码的错误</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Variables\">如何存储你需要的信息——变量</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Math\">JavaScript 中的基础数学 — 数字和操作符</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Strings\">文本处理——JavaScript 中的字符串</a></li><li><em><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods\" aria-current=\"page\">有用的字符串方法</a></em></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays\">数组</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">笑话生成器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals\">在代码中做决定——条件语句</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Loops\">循环吧，代码</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Functions\">函数——可复用的代码块</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">创建你自己的函数</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Return_values\">函数返回值</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Events\">事件介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Event_bubbling\">事件冒泡</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Image_gallery\">图片库</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript 对象基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/DOM_scripting\">DOM 脚本简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Network_requests\">从服务器获取数据</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/JSON\">使用 JSON</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">处理常见的 JavaScript 问题</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript 架构和库</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\">客户端框架介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">框架的主要特性</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">React 入门</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">开始我们的 React 待办清单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">组件化我们的 React App</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\" class=\"only-in-en-us\">React interactivity: Events and state</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\" class=\"only-in-en-us\">React interactivity: Editing, filtering, conditional rendering</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\" class=\"only-in-en-us\">Accessibility in React</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\" class=\"only-in-en-us\">React resources</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility\">无障碍</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">什么是无障碍？</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/Tooling\">解决常见的无障碍问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML\">HTML：无障碍的良好基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS 和 JavaScript 无障碍最佳实践</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA 基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/Multimedia\">多媒体无障碍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/Mobile\">移动端无障碍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">测验：无障碍疑难解答</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Design_for_developers\" class=\"only-in-en-us\">为开发人员设计</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Version_control\">版本控制</a></li><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Extensions\" class=\"only-in-en-us\">扩展模块</a></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">对象原型</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">面向对象编程基本概念</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">JavaScript 中的类</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">实践对象构造</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">为“弹球”示例添加新功能</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs\">客户端 Web API</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Web API 简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">视频和音频 API</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">绘图</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">客户端存储</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">第三方 API</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS\">异步 JavaScript</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Introducing\">异步 JavaScript 简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Promises\">如何使用 Promise</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">如何实现基于 Promise 的 API</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">worker 简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">序列动画</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms\">Web 表单</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Your_first_form\">创建我的第一个表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">如何构建 HTML 表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">原生表单部件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">HTML5 的输入（input）类型</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">其他表单控件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">样式化 Web 表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">表单样式化进阶</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI 伪类</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Form_validation\">表单数据校验</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">发送表单数据</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools\">理解客户端工具</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">客户端工具概述</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">软件包管理基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">介绍完整的工具链</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">部署我们的应用</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side\">服务端网站</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps\">服务端基础</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">服务端编程介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">客户端服务端交互概述</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">服务端 web 框架</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">站点安全</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django\">Django web 框架（Python）</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Django 介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">设置 Django 开发环境</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: The Local Library website</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django Tutorial Part 2: 创建网站的地基</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Models\">Django Tutorial Part 3: 使用模型</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\">Django Tutorial Part 4: Django 管理员站点</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\">Django 教程 5：主页构建</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\">Django 教程 6: 通用列表和详细信息视图</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\">Django 教程 7: 会话框架</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\">Django 教程 8：用户授权与许可</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Forms\">Django 教程 9: 使用表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Testing\">Django 教程 10: 测试 Django 网页应用</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\">Django 教程 11：部署 Django 到生产环境</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\">Django Web 应用安全</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\">评估：DIY Django 微博客</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express web 框架（Node.js）</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Express/Node 入门</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">设置 Node 开发环境</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express 教程：本地图书馆网站</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express 教程 2：创建站点框架</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express 教程 3：使用数据库 (Mongoose)</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\">Express 教程 4：路由和控制器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express 教程 5: 呈现图书馆数据</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express 教程 6: 使用表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\">Express 教程 7：部署到生产环境</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance\">Web 性能</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/why_web_performance\">Web 性能的重要性</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">什么是 web 性能？</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">感知性能</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">测量性能</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/Multimedia\">多媒体：图片</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/video\">多媒体：视频</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/HTML\">HTML 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/CSS\">CSS 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">web 性能的商业案例</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing\">测试</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Introduction\">跨浏览器测试介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">测试的策略</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">处理常见的 HTML 和 CSS 问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Feature_detection\">实现特性检测</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Automated_testing\">自动化测试简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">搭建自己的自动化测试环境</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Transform_animate\" class=\"only-in-en-us\">CSS 变换与动画化</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Security_privacy\" class=\"only-in-en-us\">安全与隐私</a></li><li class=\"section\">更多资源</li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Howto\">如何解决常见问题</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Solve_HTML_problems\">使用 HTML 解决常见问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Solve_CSS_problems\">解决常见的 CSS 问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">解决 JavaSctript 代码的常见问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Web_mechanics\">Web 机制</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup\">工具和安装</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Design_and_accessibility\">设计与无障碍</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/About\" class=\"only-in-en-us\">关于</a></li><li><a href=\"/en-US/docs/Learn_web_development/Educators\" class=\"only-in-en-us\">面向教育工作者的资源</a></li><li><a href=\"/en-US/docs/Learn_web_development/Changelog\" class=\"only-in-en-us\">更新日志</a></li></ol>","source":{"folder":"zh-cn/learn_web_development/core/scripting/useful_string_methods","github_url":"https://github.com/mdn/translated-content/blob/main/files/zh-cn/learn_web_development/core/scripting/useful_string_methods/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/b61971bb4836b5fda657fac82930c2c32017a3f0","filename":"index.md"},"summary":"现在我们学习基本的字符串语法，让我们开始思考一下我们可以对内置方法的字符串做什么有用的操作，例如查找文本字符串的长度，加入和分割字符串，将字符串中的一个字符替换为另一个字符。","title":"有用的字符串方法","toc":[{"text":"把字符串当作对象","id":"把字符串当作对象"},{"text":"主动学习的示例","id":"主动学习的示例"},{"text":"结论","id":"结论"}],"pageType":"learn-module-chapter"}}</script></body></html>