4a:I[132969,["$2"],"IconMark"] 25:["$","title",null,{"children":"Working with Strings (Learn JS Data) | Peeti | Observable"}] 49:[] 29:{"id":"0137d586b7f10f9c","slug":null,"title":"Working with Strings (Learn JS Data)","thumbnail":"0a10a9b4183ad00de37e0464699e533bcbfde55c3a27071c780ba9c75dedc3a9","access_level":"public","create_time":"$D2023-04-12T23:39:42.246Z","update_time":"$D2023-04-12T23:39:42.246Z","view_time":null,"first_public_time":"$D2023-04-12T23:39:42.246Z","has_unpublished_edits":null,"fork":{"id":"45527c03b02c1ead","slug":"working-with-strings-learn-js-data","title":"Working with Strings (Learn JS Data)","owner":{"id":"70c3e45a1a202b95","login":"berkeleyvis","name":"Berkeley MIDS W209 Information Visualization Course"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a9bf89821413483c","login":"peeti-ucberkeley","name":"Peeti","avatar_url":"https://avatars-next.observableusercontent.com/fdd6b259d8c38774bbc979bf51c5d60060653a9e70bc138e8f0562606bc91782","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":153,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"579bf6a59bb2b176","login":"peeti-ucberkeley","name":"Peeti","avatar_url":"https://avatars-next.observableusercontent.com/fdd6b259d8c38774bbc979bf51c5d60060653a9e70bc138e8f0562606bc91782","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"579bf6a59bb2b176","login":"peeti-ucberkeley","name":"Peeti","avatar_url":"https://avatars-next.observableusercontent.com/fdd6b259d8c38774bbc979bf51c5d60060653a9e70bc138e8f0562606bc91782","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Working with Strings (Learn JS Data)","cells":[{"id":3,"value":"md`# Working with Strings (Learn JS Data)\n**ES6 and D3@6 Version**\n\n*This notebook was generated from the [learnjsdata source](https://github.com/vlandham/js_data) and updated.*\n\nString cleaning is something you end up doing quite a lot. Hopefully this task will help make the process less painful. There are a near infinite transformations you might want to do with strings, so we won't get to everything, but this will serve as a starting point for common manipulations that will come up again and again.\n\nWe will start with generic JavaScript string functions and add in a bit of [lodash](https://lodash.com/) magic to make things easier.\n\n## String Basics\n\nSimilar to arrays, the characters in strings are accessible via indexing\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"aChar = \"Hello There!\"[6]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`Also, just like arrays, you have access to the powerful [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice) method, which is used to extract sub-sections based on indexes.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"aSlice = \"Hello There!\".slice(6,11)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`The sliced string goes up to - but not including - the last index.\n\nAnd, of course, string concatenation is done in JavaScript using the \\`+\\` operator. Use parenthesis if you want to do actual arithmetic inside your concatenation.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"{\n let orderNum = 8;\n return `You are number ${orderNum + 1} in line.`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`Check [the documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) for all the other basic tools.\n\n## Stripping Whitespace\n\nOften, you are going to have some surrounding whitespace that you don't want corrupting the rest of your data. Reading CSV files gives a good example of this, as spaces are typically also used in conjunction with the commas to separate columns.\n\nA data file like this:\n\\`\\`\\`\ncities_spaced.csv:\n\ncity ,state ,population,land area\n seattle ,WA , 652405 ,83.9\nnew york,NY,8405837, 302.6\n\\`\\`\\`\nWhen [read in](/@dakoop/reading-in-data-learn-js-data) can produce quite the messy dataset:\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"data = d3.csv(\"https://cdn.rawgit.com/vlandham/js_data/master/data/cities_spaced.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`\nNote the spaces in the property names as well as the values. In cases like this, it might be best to [map](/@berkeleyvis/iterating-over-and-reducing-data-learn-js-data) the data back to a clean version. [\\`String.trim\\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim) can help. It removes that unsightly whitespace from the front and back of your strings.\n\nHere is a version of the data loading function that removes whitespace. It uses a row conversion function with \\`d3.csv\\` that makes use of \\`trim\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3.csv(\n \"https://cdn.rawgit.com/vlandham/js_data/master/data/cities_spaced.csv\",\n d => {\n let cleanD = {};\n for (let k of Object.keys(d)) {\n cleanD[k.trim()] = d[k].trim();\n }\n return cleanD;\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`\nThe strings are now clear of those pesky spaces.\n\n## Find and Replace\n\nExtracting data from strings can sometimes mean extracting pieces of strings. Finding out if a string contains a keyword or sub-string of interest is a first step in quantifying the content of a body of text.\n\n[indexOf]() can be used to perform this searching. You pass it a sub-string, and it'll tell you the location in string you are calling it where that sub-string starts. \\`-1\\` is returned if the sub-string can't be found. You can use this to build a little string finder, by comparing the return value to \\`-1\\`.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"\"A man, a plan, a canal\".indexOf(\"man\") !== -1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"\"A man, a plan, a canal\".indexOf(\"panama\") !== -1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`Replace is the butter to find's bread. We will see more replacing when we get to regular expressions, but replacing sections of a string can be done with the [replace]() method.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"\"A man, a plan, a canal\".replace(\"canal\", \"\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"md`However, this will only replace the first occurence of the string. If you want to replace them all you need to use regular expressions`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"\"A man, a plan, a canal\".replace(\n / a /g, // The /g specifies that we want to replace all instances\n \" the \"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`## Templating\n\nWhen you need to create a more complicated string, such as an html snippet, it may\nbecome too tedious to just combine strings by concatenating them with your variables. Consider\nthe following following object:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"person = ({ name : \"Birdman\", occupation: \"Imaginary Super Hero\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"md`that we wish to display like this\n\\`\\`\\`html\n

\n Birdman\n Imaginary Super Hero\n

\n\\`\\`\\`\n\nIf we wanted to build this display using string concatenation, it might look like this:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"html_snippet = \"

\" +\n \"\" + person.name + \"\" +\n \"\" + person.occupation + \"\" +\n \"

\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`That's a lot of string escaping! You can imagine this gets pretty hard to manage\nafter a while. Instead, we can use [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to do this more easily.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"`

\n ${person.name}\n ${person.occupation}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"templateFunction({ name : \"James. James Bond\", occupation: \"Spy\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`\n## See Also\n\n- [Working With Strings](http://www.quirksmode.org/js/strings.html) - a great guide to more string basics\n- [underscore.string](https://github.com/epeli/underscore.string) - for all the other string functions you might want\n- [underscore.template](http://underscorejs.org/#template) - for a deeper dive into underscore's template function\n- [ES2016's Template Literal syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) that allows template string without the need for lodash/underscore if you use ES2016 or [TypeScript](https://basarat.gitbooks.io/typescript/content/docs/template-strings.html).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null 3f:[["$","title","0",{"children":"Working with Strings (Learn JS Data) | Peeti | Observable"}],["$","meta","1",{"property":"og:title","content":"Working with Strings (Learn JS Data)"}],["$","meta","2",{"property":"og:description","content":"An Observable notebook by Peeti"}],["$","meta","3",{"property":"og:url","content":"https://observablehq.com/d/0137d586b7f10f9c"}],["$","meta","4",{"property":"og:site_name","content":"Observable"}],["$","meta","5",{"property":"og:image","content":"https://images.observableusercontent.com/thumbnail/0a10a9b4183ad00de37e0464699e533bcbfde55c3a27071c780ba9c75dedc3a9.jpg"}],["$","meta","6",{"property":"og:image:width","content":"640"}],["$","meta","7",{"property":"og:image:height","content":"400"}],["$","meta","8",{"property":"og:type","content":"article"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"Working with Strings (Learn JS Data)"}],["$","meta","11",{"name":"twitter:description","content":"An Observable notebook by Peeti"}],["$","meta","12",{"name":"twitter:image","content":"https://images.observableusercontent.com/thumbnail/0a10a9b4183ad00de37e0464699e533bcbfde55c3a27071c780ba9c75dedc3a9.jpg"}],["$","meta","13",{"name":"twitter:image:width","content":"640"}],["$","meta","14",{"name":"twitter:image:height","content":"400"}],["$","link","15",{"rel":"icon","href":"/favicon.ico?favicon.2hqc0rwsy9zm6.ico","sizes":"96x96","type":"image/x-icon"}],["$","link","16",{"rel":"icon","href":"/icon.png?icon.1mhghqfpotdlb.png","sizes":"512x512","type":"image/png"}],["$","$L4a","17",{}]] 48:null